/* ============================================================
   Gonok — landing
   The page is built like a shopkeeper's khata: everything sits on
   a rule, labels left, money right. One loud surface (the offline
   band), everything else hairlines and type.
   ============================================================ */


:root {
  --paper:      #FAFBFD;
  --card:       #FFFFFF;
  --ink:        #10131A;
  --graphite:   #59606E;
  --rule:       #E4E7EF;
  --blue:       #1B4CEB;
  --blue-deep:  #002FD3;
  --blue-lift:  #2A5CF8;
  --wa:         #128C7E;

  --display: 'Hind Siliguri', system-ui, sans-serif;
  --body:    'Hind Siliguri', system-ui, sans-serif;

  --gut: clamp(20px, 5vw, 40px);
  --band: clamp(72px, 9vw, 132px);
  /* 14px, matched to the phone UI in the hero: its primary button (.pa__pay)
     is 16px on a ~50px control, the same ratio this gives on a ~48px .btn.
     It also lines the buttons up with the form fields, which are already 14. */
  --r: 14px;
  --lh-bn: 1.62;
}

:root[lang='en'] {
  --display: 'Anek Latin', 'Hind Siliguri', system-ui, sans-serif;
  --body:    'Anek Latin', 'Hind Siliguri', system-ui, sans-serif;
  --lh-bn: 1.55;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* 320px is a real phone width; the nav's three fixed items just fit */
@media (max-width: 400px) {
  .brand .wordmark { height: 16px; }
  /* `auto`, NOT a fixed .5rem. This block used to set margin-inline-start to
     .5rem, which silently cancelled the auto margin that pushes this group to
     the row's right edge — so on every phone at or under 400px the language
     switcher and CTA floated mid-row, 64px short of the gutter, while looking
     correct at 401px and up. Tighten the gap here, never the auto margin. */
  .nav__end { gap: .45rem; margin-inline-start: auto; }
  .nav__end .btn--sm { padding: .45em .7em; font-size: .8rem; }
  .lang { font-size: .78rem; }
  .lang span { padding: .45em .5em; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 400;
  font-size: clamp(16px, 1.02vw + 13px, 18px);
  line-height: var(--lh-bn);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap { width: min(1160px, 100%); margin-inline: auto; padding-inline: var(--gut); }

.skip {
  position: absolute; left: -9999px; top: 8px;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r); z-index: 99;
}
.skip:focus { left: 12px; }

:where(a, button, input, select, summary):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── type scale ────────────────────────────────────────────── */
.h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.6rem, 5.4vw, 4.5rem);
  line-height: 1.22;
  letter-spacing: -0.012em;
  margin: 0 0 .55em;
  max-width: 18ch;
  text-wrap: pretty;
}
:root[lang='en'] .h1 { font-weight: 700; font-size: clamp(2.4rem, 4.6vw, 3.9rem); line-height: 1.06; letter-spacing: -0.028em; max-width: 17ch; }

/* The brand word carries the brand colour in the hero headline. It is the one
   place on the page where the name is spoken as a name rather than a logo, so
   it gets the blue the wordmark would have had. */
.hl { color: var(--blue); }

.h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.95rem, 3.3vw, 3.1rem);
  line-height: 1.26;
  margin: 0 0 .55em;
  max-width: 30ch;
}
:root[lang='en'] .h2 { font-weight: 700; line-height: 1.1; letter-spacing: -0.022em; }

.h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.3rem, 1.75vw, 1.65rem);
  line-height: 1.32;
  margin: 0 0 .4em;
}
:root[lang='en'] .h3 { font-weight: 700; }

.lede { font-size: clamp(1.08rem, .62vw + .93rem, 1.35rem); color: var(--graphite); max-width: 44ch; margin: 0 0 2rem; }

.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* ── buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5em;
  padding: .82em 1.5em;
  border: 1px solid transparent;
  border-radius: var(--r);
  font: inherit;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.btn--solid { background: var(--blue); color: #fff; }
.btn--solid:hover { background: var(--blue-deep); }
.btn--wa { color: var(--ink); border-color: var(--rule); background: var(--card); }
.btn--wa:hover { border-color: var(--ink); }
.btn--sm { padding: .55em 1.05em; font-size: .93rem; }
.btn--block { width: 100%; padding-block: .95em; }
/* for use on the blue CTA panels */
.btn--white { background: #fff; color: var(--blue-deep); border-color: #fff; }
.btn--white:hover { background: #EDF1FF; border-color: #EDF1FF; }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

/* ── nav ───────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--rule);
}
.nav__in { display: flex; align-items: center; gap: 1.5rem; height: 66px; }
/* Brand blue, not ink. The logotype is the one place the brand colour is
   allowed to sit in the otherwise-quiet nav — it reads as identity rather
   than as a third link competing with the two grey ones beside it. Set on
   .brand (the <a>), not on .wordmark, so the SVG keeps inheriting through
   currentColor and stays reusable at its other three sizes. */
.brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--blue); }
.brand .wordmark { height: 19px; }

/* the wordmark inherits its colour from whatever wraps it — brand blue in
   the nav (.brand), white in the footer (.foot__brand / .foot__giant). Never hard-code a fill
   on it; the SVG ships with fill="currentColor" so one copy serves both. */
.wordmark { display: block; width: auto; height: 1em; }

.nav__links { display: flex; gap: 1.6rem; margin-inline-start: auto; }
.nav__links a { color: var(--graphite); text-decoration: none; font-size: .97rem; }
.nav__links a:hover { color: var(--ink); }

.nav__end { display: flex; align-items: center; gap: .7rem; margin-inline-start: auto; }
/* Desktop shows "book a demo"; the phone swaps in a tap-to-dial. Only one is
   ever in the layout, so the nav's right edge never shifts between them. */
.nav__call { display: none; }
/* Sign-in is a real outlined button, not a grey text link — a shopkeeper who
   already has an account is one of the two people this nav serves, and a link
   that reads exactly like the section links beside it made them hunt for it.
   It borrows `.btn.btn--wa.btn--sm` wholesale (same height, radius and inset
   as the blue CTA), so the two sit as an outline/solid pair: existing customer
   left, new visitor right. Only the weight is nudged here. */
.signin { font-weight: 500; }

/* A light segmented control. NOTE the doubled `.lang .lang__on` selectors
   below: `.lang span` is 0,1,1 and silently beat a bare `.lang__on` (0,1,0)
   on `color`, so the active chip rendered grey text on white. Same class of
   trap as .off__stateSub / .form .hp earlier in this campaign. It used to fill the active half with solid INK,
   which at nav size read as a black blank sitting next to the blue CTA and
   pulled more attention than either real action. Now the TRACK is tinted and
   the active half is a plain white chip — the same shape, a fraction of the
   weight. The swap is declared once per direction so both languages get an
   identical treatment. */
.lang {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--rule); border-radius: var(--r);
  background: #EEF1F7; padding: 3px; gap: 2px; cursor: pointer;
  font: inherit; font-size: .85rem; line-height: 1;
}
.lang span {
  padding: .53em .6em;
  border-radius: calc(var(--r) - 4px);
  color: var(--graphite);
  transition: background-color .16s ease, color .16s ease;
}
.lang .lang__on { background: var(--card); color: var(--ink); font-weight: 500; box-shadow: 0 1px 2px rgba(16, 19, 26, .08); }
:root[lang='en'] .lang .lang__on { background: transparent; color: var(--graphite); font-weight: 400; box-shadow: none; }
:root[lang='en'] .lang .lang__off { background: var(--card); color: var(--ink); font-weight: 500; box-shadow: 0 1px 2px rgba(16, 19, 26, .08); }
/* Hover targets whichever half is currently INACTIVE — which half that is
   depends on the language, so it takes both rules. */
:root:not([lang='en']) .lang:hover span.lang__off { color: var(--ink); }
:root[lang='en'] .lang:hover span.lang__on { color: var(--ink); }

/* ── hero ──────────────────────────────────────────────────── */
.hero { padding-block: clamp(48px, 6vw, 76px) 0; }
.hero__in {
  display: grid;
  grid-template-columns: minmax(0, 1.34fr) minmax(0, .66fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
}
.acts { display: flex; flex-wrap: wrap; gap: .7rem; }

/* ── shop types: the slow drift under the hero ────────────────
   Full-bleed on purpose: it runs under BOTH hero columns, so the eye reads
   it as a base the headline and the phone sit on rather than as a caption
   belonging to either. Hairline top and bottom, because on this page
   everything sits on a rule.

   The icons are the app's own shop-setup artwork, inlined into the sprite
   (see the comment above the markup). The well geometry is the app's too:
   its tile uses a 60px square at radius 18, a 0.3 ratio, so the 38px well
   here takes radius 11 and reads as the same shape at a smaller size.

   MOTION: the track is duplicated in the markup and the pair is shifted by
   exactly half the flex row's width, so the moment copy A leaves the
   viewport copy B is in its old place, pixel for pixel. Cycle length is
   tied to the item COUNT, not to a pixel distance, so the two languages
   drift at roughly the same reading pace despite different label widths. */
/* No rules, no tinted band. The rest of the page separates sections with a
   hairline; this one earns its own space instead, through scale and a wide
   margin. Two hairlines plus a tint were drawing a BOX around it, which made
   it read as a footnote strip attached to the phone rather than as a section
   in its own right. Founder's call, 2026-09-15. */
.types {
  margin-top: clamp(64px, 9vw, 124px);
  /* `--band` is the page's standard section-to-section gap (used by .shots,
     .work, .dev, .faq); the ticker had none on its trailing edge, so the
     next section's heading landed almost flush under the last drifting
     item. */
  margin-bottom: var(--band);
  padding-block: clamp(4px, 1vw, 10px);
  overflow: hidden;
}

/* A real heading now, not a caption — an <h2> after the hero's <h1>, sized
   between .lede and .h2 so it carries the section without out-shouting the
   headline it sits under. */
.types__cap {
  font-family: var(--display);
  /* Trimmed again when the type got smaller — the old gap was measured
     against a 2.15rem heading and left this lighter line stranded. */
  margin: 0 0 clamp(20px, 2.6vw, 34px);
  text-align: center;
  /* Subordinate to the .h2 that follows a screen-length later — this is a
     lead-in over the ticker, not a second headline. At 700/2.15rem/ink it was
     nearly the weight of that .h2 and the two stacked read as one heavy block;
     smaller, 600, and graphite puts it a clear step below. */
  font-size: clamp(1.02rem, 1.65vw, 1.38rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--graphite);
  /* One line where it fits, two only where it doesn't — no forced nowrap
     and no ch cap. Normal wrapping is bounded by the block's own width
     (padding-inline: var(--gut), same as the container), so it can never
     paint past .types' edge the way `nowrap` briefly did (that variant
     measured 490px of text in a 480px box and got silently clipped by
     .types' overflow:hidden — the mask rule that makes the marquee fade at
     its edges). `balance` only matters once it actually wraps: it keeps
     that case to two even lines instead of a long line plus an orphan
     word. Founder call, 2026-09-15 (single line), revised same day (wrap
     allowed on narrow screens). */
  text-wrap: balance;
  margin-inline: auto;
  padding-inline: var(--gut);
}

/* A SCROLLER now, not a transform marquee (2026-09-20, founder's call). The
   strip used to be `typesDrift` translating a max-content box, with :hover as
   its only brake — so on a phone there was no way to stop it and no way back
   to a name that had just slid off. It is a real horizontal scroll container:
   touch pans it with the platform's own momentum, a mouse drags it, and the
   idle drift is a rAF loop nudging scrollLeft (armTypesTicker in main.js).
   One coordinate, so a finger and the drift can never fight each other.

   The fade is a mask, not two gradient overlays: an overlay would have to
   guess the band's background colour and would smear the moment that changes.
   A mask cuts the content itself, so it is background-agnostic. It sits on the
   scroll PORT — on the old max-content box its 10%/90% stops were a tenth of
   the entire strip in from each end and never reached the screen at all. */
.types__view {
  display: flex;
  /* Matches the in-track gap, so the seam between one copy and the next is
     the same distance as any other pair. That gap is what the tracks' old
     inline padding was for; padding cannot be used here because every copy
     has to be EXACTLY one period wide for the wrap to be invisible. */
  gap: clamp(1.6rem, 3.2vw, 3rem);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Stops a horizontal overscroll from turning into the browser's back
     gesture — on a trackpad that would leave the page mid-swipe. */
  overscroll-behavior-x: contain;
  cursor: grab;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.types__view::-webkit-scrollbar { display: none; }
.types__view.is-drag { cursor: grabbing; user-select: none; }
.types__view:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 12px; }

.types__track {
  display: flex; align-items: center; flex: none;
  gap: clamp(1.6rem, 3.2vw, 3rem);
  margin: 0; padding: 0; list-style: none;
}

.types__item {
  display: inline-flex; align-items: center; flex: none;
  gap: clamp(.65rem, 1vw, .9rem);
  color: var(--ink); font-size: clamp(1rem, 1.7vw, 1.2rem);
  /* 600, not the section title's 700 — a bit bold so each shop name reads
     as a label, not competing with .types__cap above it. */
  font-weight: 600;
  white-space: nowrap;
}

/* No separator dot any more. With a filled well anchoring the left edge of
   every item, a dot between them was a third mark competing with two that
   already read as a boundary. */
/* The app's tile geometry, now at 1:1 — 60px square, radius 18, 44px icon
   (Invento/app/shop-setup.tsx `iconWell` + its <CategoryIcon size={44}>).
   The first cut scaled this down to 38/11/22 to keep the strip slim; at full
   size it matches what a shopkeeper taps during setup exactly. Shrinks on
   narrow screens only because two 60px wells plus labels will not fit a
   360px phone otherwise. */
.types__well {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: clamp(48px, 5vw, 60px); height: clamp(48px, 5vw, 60px);
  border-radius: clamp(14px, 1.5vw, 18px);
  background: var(--st-well, #F2F3F5);
}
.types__ic { width: clamp(34px, 3.6vw, 44px); height: clamp(34px, 3.6vw, 44px); display: block; }

/* ── per-shop-type well tints ──────────────────────────────────
   SITE-ONLY. Founder's call, 2026-09-15, over the recommendation to reuse
   the app's single neutral well. There is NO counterpart to this palette in
   the product: the app's shop-setup tile paints every one of the eighteen
   the same `surfaceAlt` and lets the illustration carry the colour. So this
   list has no source of truth to be checked against and nothing will flag it
   when it drifts — keep it here, in one block, and nowhere else.

   Every tint is a WASH, not a colour: the offline band is still this page's
   one loud surface and eighteen saturated squares would argue with it. They
   are grouped the way the app groups the picker — food, health and beauty,
   apparel, education, tech, industrial, catch-all — so neighbours in the
   drift share a family rather than strobing.
   `general` deliberately uses the app's real #F2F3F5: the catch-all is the
   one type whose well matches the product exactly. */
.types__item--grocery          { --st-well: #E9F4E4; }  /* food */
.types__item--supermarket      { --st-well: #E4EFF7; }
.types__item--bakery           { --st-well: #FCEEE2; }
.types__item--restaurant       { --st-well: #FBE9E7; }
.types__item--pharmacy         { --st-well: #E3F3EC; }  /* health + beauty */
.types__item--cosmetics        { --st-well: #FBE6F0; }
.types__item--clothing         { --st-well: #EDE9FB; }  /* apparel */
.types__item--shoes            { --st-well: #E8EDF9; }
.types__item--stationery       { --st-well: #FDF3DC; }  /* education */
.types__item--electronics      { --st-well: #E5EEFD; }  /* tech */
.types__item--computer         { --st-well: #E7EBF6; }
.types__item--gadget           { --st-well: #EDE8F8; }
.types__item--home-electronics { --st-well: #E4F1F6; }
.types__item--electric         { --st-well: #FDF4D9; }  /* industrial */
.types__item--power-solar      { --st-well: #FCEFD4; }
.types__item--auto             { --st-well: #EAECEF; }
.types__item--hardware         { --st-well: #F0EDE8; }
.types__item--general          { --st-well: #F2F3F5; }  /* the app's own */

/* The page-wide reduce rule collapses every animation to .001ms, which for a
   translate marquee does NOT mean "stopped" — it means "snapped to -50% and
   frozen there", i.e. visibly cut in half. So this case is handled on its own
   terms: no transform at all, no duplicate track, and the list simply wraps
   and centres. */
@media (prefers-reduced-motion: reduce) {
  .types__view { overflow: visible; cursor: auto; -webkit-mask-image: none; mask-image: none; }
  /* armTypesTicker returns before it clones, so copy B is the only extra. */
  .types__view .types__track + .types__track { display: none; }
  .types__track {
    flex-wrap: wrap; justify-content: center; width: 100%;
    row-gap: clamp(1rem, 1.8vw, 1.6rem);
  }
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 1em; height: 1em; display: block; flex: none; }

/* ── the device ────────────────────────────────────────────────
   Front-on, no tilt, no motion. The form comes from a white frame
   lifted off the page by a stacked neutral shadow — no brand glow.
   SWAP POINT: replace .phone with <img class="phone-shot">. */
/* min-width:0 so this grid item can shrink; without it the phone's own
   width becomes the column's min-content and pushes the page sideways. */
.stage {
  position: relative; min-width: 0; min-height: 668px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px;
}
/* same promise the laptop section makes, made here too */
.phone {
  position: relative; z-index: 2;
  width: 310px; max-width: 100%;
  margin-inline: auto;
  border-radius: 48px;
  padding: 11px;
  background: linear-gradient(152deg, #FFFFFF 0%, #FAFBFD 42%, #EDF0F6 100%);
  box-shadow:
    0 2px 3px rgba(16, 19, 26, .06),
    0 8px 16px rgba(16, 19, 26, .07),
    0 24px 44px rgba(16, 19, 26, .10),
    0 62px 96px -26px rgba(16, 19, 26, .22),
    inset 0 2px 1px rgba(255, 255, 255, 1),
    inset 0 -2px 3px rgba(16, 19, 26, .07),
    inset 0 0 0 1px rgba(16, 19, 26, .09);
}
/* contact shadow on the ground, anchored to the device */
.phone::before {
  content: ''; position: absolute; z-index: -1;
  left: 4%; right: 4%; bottom: -32px; height: 58px;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(16, 19, 26, .34) 0%, rgba(16, 19, 26, .14) 42%, transparent 71%);
  filter: blur(17px);
}
/* glass sheen — the only thing suggesting the screen is under glass */
.phone::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(147deg,
    rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 34%,
    rgba(255, 255, 255, 0) 72%, rgba(16, 19, 26, .035) 100%);
  pointer-events: none;
}
.phone__btn {
  position: absolute; inset-inline-end: -2px;
  width: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #DFE3EC, #F6F8FB);
}
.phone__btn--vol { top: 21%; height: 64px; }
.phone__btn--pwr { top: 34%; height: 38px; }

/* The screen is a window onto the 390x844 canvas: its height comes from
   the canvas ratio, so the frame can never disagree with what it holds. */
.phone__screen {
  width: 100%;
  aspect-ratio: 390 / 788;
  background: #F2F4F8;
  border-radius: 38px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(16, 19, 26, .05);
}

/* real photo drop-in: same slot, no inner markup */
.phone-shot { position: relative; z-index: 2; display: block; width: 100%; height: auto; margin-inline: auto; }

/* ── the app inside the phone ──────────────────────────────────
   Authored on a real 390x844 phone canvas — the same logical size
   the app actually renders at — then scaled to whatever width the
   frame ends up. That means the numbers below are the app's REAL
   type sizes and paddings, traced straight off device screenshots,
   instead of numbers fudged down to fit a 270px mock.
   Scale is set from JS (--pa-scale); CSS cannot do it, because
   `scale()` needs a unitless number and calc(100cqw/390) is a
   length. See fitPhone() in main.js. */
.pa {
  width: 390px; height: 788px;
  transform: scale(var(--pa-scale, 1));
  transform-origin: top left;
  background: #F2F4F8;
  display: flex; flex-direction: column;
  font-size: 14px; line-height: 1.4; color: var(--ink);
  position: relative;
}

/* status bar */
.pa__status {
  flex: none;
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 26px 6px;
  font-size: 13px; font-weight: 600;
}
.pa__statR { display: inline-flex; align-items: center; gap: 6px; }
.pa__sig { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 9px; }
.pa__sig i { display: block; width: 2.5px; border-radius: 1px; background: rgba(16, 19, 26, .5); }
.pa__sig i:nth-child(1) { height: 3px; }
.pa__sig i:nth-child(2) { height: 5px; }
.pa__sig i:nth-child(3) { height: 7px; }
.pa__sig i:nth-child(4) { height: 9px; }
.pa__batt {
  width: 19px; height: 10px; border-radius: 2.5px; padding: 1.5px;
  background: var(--ink); display: block;
}
.pa__batt b { display: block; height: 100%; width: 100%; border-radius: 1px; background: #fff; }

/* the scroller. On a mouse the screens scroll like the real app;
   on touch they do not, so a finger swiping the page can never get
   trapped inside the hero. */
.pa__body { flex: 1; min-height: 0; overflow: hidden; }
@media (pointer: fine) {
  .pa__body { overflow-y: auto; scrollbar-width: none; }
  .pa__body::-webkit-scrollbar { display: none; }
}

.pa__view { display: none; padding: 0 16px 18px; }
/* screens cross-fade in, so the tour's steps read as navigation rather than
   flicker. The global reduced-motion rule collapses this to nothing. */
.pa__view.is-on { display: block; animation: paViewIn .16s ease both; }
@keyframes paViewIn { from { opacity: 0; } to { opacity: 1; } }

/* headers */
.pa__head { display: flex; justify-content: space-between; align-items: center; padding: 8px 0 14px; }
.pa__shop { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
/* the demo phone wears Gonok's own logotype where the shop name used to sit.
   Deep blue rather than --blue: at this weight the thin strokes on a near-white
   screen read lighter than the same value does as the Sell card's solid fill. */
.pa__brand { display: inline-flex; align-items: center; color: var(--blue-deep); }
.pa__wm { height: 18px; width: auto; display: block; }
.pa__headR { display: flex; align-items: center; gap: 8px; }
.pa__lang {
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border-radius: 999px; padding: 7px 12px;
  box-shadow: 0 1px 3px rgba(16, 19, 26, .07);
}
.pa__lang em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--graphite); }
.pa__lang .on { color: var(--ink); }
.pa__sync {
  width: 34px; height: 34px; display: grid; place-items: center;
  background: #fff; border-radius: 999px; font-size: 17px; color: var(--ink);
  box-shadow: 0 1px 3px rgba(16, 19, 26, .07);
}

/* pushed-screen header: back chevron + title */
.pa__nav { display: flex; align-items: center; gap: 10px; padding: 6px 0 12px; }
.pa__back {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  background: #fff; border: 0; border-radius: 999px; font-size: 18px; color: var(--ink);
  cursor: pointer; box-shadow: 0 1px 3px rgba(16, 19, 26, .07);
}
.pa__nav b { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }

.pa__h1 { display: block; font-size: 30px; font-weight: 700; letter-spacing: -.025em; line-height: 1.15; }
.pa__h1s { display: block; font-size: 13px; color: var(--graphite); margin-top: 1px; }
.pa__title { display: flex; justify-content: space-between; align-items: flex-start; padding: 6px 0 14px; }
.pa__add {
  font: inherit; font-size: 14px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--blue); color: #fff; border: 0; border-radius: 999px; padding: 10px 18px;
}
.pa__add .ic { font-size: 15px; }

.pa__cap {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--graphite); padding: 4px 2px 8px;
}
.pa__lbl { font-size: 15px; font-weight: 600; padding: 4px 2px 8px; }

/* icon tiles */
.pa__tile {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  background: #E6EDFF; border-radius: 11px; font-size: 19px; color: var(--blue);
}
.pa__tile--lg { width: 44px; height: 44px; border-radius: 13px; font-size: 21px; }
.pa__tile--glass { background: rgba(255, 255, 255, .2); color: #fff; }
.pa__tile--red    { background: #FDE9E9; color: #D63B3B; }
.pa__tile--amber  { background: #FCEFD8; color: #D98315; }
.pa__tile--green  { background: #DFF3E9; color: #0F9464; }
.pa__tile--slate  { background: #E8EBF2; color: #4A5265; }
.pa__tile--violet { background: #EAE6FB; color: #6543C4; }

/* net-total card */
.pa__net {
  background: linear-gradient(168deg, #D7DEF6 0%, #E7EBF8 60%, #F1F3FA 100%);
  border-radius: 24px; padding: 18px 18px 16px; margin-bottom: 12px;
}
.pa__netCap { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.pa__net > b { display: block; font-size: 42px; font-weight: 600; line-height: 1.15; letter-spacing: -.03em; margin-top: 4px; }
.pa__netSub { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--graphite); margin-top: 6px; }
.pa__netSub .ic { font-size: 14px; color: #0F9464; }
.pa__netSub i { font-style: normal; }
.pa__netSub s { width: 3px; height: 3px; border-radius: 50%; background: var(--graphite); text-decoration: none; }

/* the blue Sell card */
.pa__sell {
  width: 100%; text-align: start; font: inherit; cursor: pointer; border: 0;
  display: flex; align-items: center; gap: 12px;
  background: var(--blue); color: #fff;
  border-radius: 22px; padding: 16px; margin-bottom: 12px;
}
.pa__sellTxt { flex: 1; min-width: 0; }
.pa__sellTxt b { display: block; font-weight: 600; font-size: 18px; }
.pa__sellTxt i { font-style: normal; font-size: 13px; opacity: .85; }
.pa__go {
  width: 32px; height: 32px; flex: none; display: grid; place-items: center;
  background: rgba(255, 255, 255, .2); border-radius: 999px; font-size: 16px;
}

.pa__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }

/* no screen behind these yet, so no pointer cursor and no hover — see README */
.pa__act { border-radius: 22px; padding: 14px; }
.pa__act--a { background: #DDE2F6; }
.pa__act--b { background: #F6E8CE; }
.pa__actTop { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.pa__actTop .ic { font-size: 15px; color: var(--blue); }
.pa__act--a .pa__tile { background: #fff; }
.pa__act--b .pa__tile { background: #fff; color: #E8920F; }
.pa__act--b .pa__actTop .ic { color: #D98315; }
.pa__act b { display: block; font-weight: 600; font-size: 15px; }
.pa__act i { font-style: normal; font-size: 12px; color: var(--graphite); }

.pa__quick {
  display: flex; align-items: center; gap: 11px;
  background: #fff; border-radius: 18px; padding: 13px;
}
.pa__quick b { font-weight: 600; font-size: 15px; }

.pa__due { background: #fff; border-radius: 18px; padding: 14px; }
.pa__due .pa__tile { width: 30px; height: 30px; font-size: 15px; border-radius: 9px; margin-bottom: 10px; }
.pa__due i { font-style: normal; display: block; font-size: 13px; color: var(--graphite); }
.pa__due b { display: block; font-weight: 600; font-size: 17px; margin-top: 2px; }

/* generic white card */
.pa__card { background: #fff; border-radius: 20px; padding: 14px; margin-bottom: 12px; }
/* First card past the fold: nudged so nothing of it peeks into the hero's
   resting view. Dues end at 663 and the body shows 681 (788 - 38 status
   - 60 tabs - 9 strip), so a normal-looking gap is now enough.
   Re-measure if anything above DUES changes. */
.pa__card--fold { margin-top: 28px; }
.pa__cardH {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 600; margin-bottom: 12px;
}
.pa__cardH .ic { font-size: 17px; color: var(--blue); }
.pa__cardH s { flex: 1; text-decoration: none; }
.pa__cardH .pa__amt { font-weight: 600; font-size: 15px; }
.pa__cardH .pa__chevi { font-size: 15px; color: var(--graphite); }

/* account chips inside the Accounts card */
.pa__accs { display: flex; gap: 8px; }
.pa__acc { flex: 1; min-width: 0; background: #F2F4F8; border-radius: 12px; padding: 10px 11px; }
.pa__acc i { font-style: normal; display: block; font-size: 11px; color: var(--graphite); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa__acc b { display: block; font-size: 14px; font-weight: 600; margin-top: 2px; white-space: nowrap; }

/* stock-health triple */
.pa__health { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.pa__health b { display: block; font-size: 26px; font-weight: 600; line-height: 1.1; }
.pa__health i { font-style: normal; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--graphite); }
.pa__health .lo b { color: #D98315; }
.pa__health .out b { color: #D63B3B; }
.pa__health .slow b { color: #D98315; }

/* ── Sell ─────────────────────────────────────────────────── */
.pa__cam {
  position: relative; height: 208px; border-radius: 20px; margin-bottom: 14px;
  background: linear-gradient(155deg, #6B6E75 0%, #4A4D54 38%, #2C2E33 100%);
  overflow: hidden;
}
.pa__camPill {
  position: absolute; top: 14px; left: 50%; translate: -50% 0;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  background: rgba(16, 19, 26, .72); color: #fff;
  border-radius: 999px; padding: 9px 16px; font-size: 14px; font-weight: 600;
}
.pa__camPill .ic { font-size: 16px; }
.pa__bracket { position: absolute; inset: 60px 48px 62px; }
.pa__bracket i { position: absolute; width: 32px; height: 32px; border: 4px solid #fff; border-radius: 3px; }
.pa__bracket i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.pa__bracket i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.pa__bracket i:nth-child(3) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.pa__bracket i:nth-child(4) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.pa__zoom {
  position: absolute; bottom: 13px; left: 50%; translate: -50% 0;
  display: flex; align-items: center; gap: 2px;
  background: rgba(16, 19, 26, .66); border-radius: 999px; padding: 4px;
}
.pa__zoom button {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  border: 0; background: none; color: rgba(255, 255, 255, .82);
  border-radius: 999px; padding: 6px 14px; line-height: 1;
}
.pa__zoom button.is-on { background: #fff; color: var(--ink); }

.pa__find {
  display: flex; align-items: center; gap: 10px;
  background: #E9ECF2; border-radius: 14px; padding: 0 14px; height: 50px;
  margin-bottom: 6px;
}
.pa__find .ic { font-size: 19px; color: var(--graphite); flex: none; }
.pa__find input {
  flex: 1; min-width: 0; font: inherit; font-size: 16px; color: var(--ink);
  border: 0; background: none; outline: none; padding: 0;
}
.pa__find input::placeholder { color: var(--graphite); }
.pa__clear { border: 0; background: none; cursor: pointer; color: var(--graphite); font-size: 18px; padding: 0; display: grid; place-items: center; }

.pa__res { list-style: none; margin: 0; padding: 0; }
.pa__res li { border-bottom: 1px solid var(--rule); }
.pa__res button {
  width: 100%; text-align: start; font: inherit; color: inherit; cursor: pointer;
  border: 0; background: none; display: flex; align-items: center; gap: 10px;
  padding: 13px 2px;
}
.pa__res em { flex: 1; min-width: 0; font-style: normal; }
.pa__res b { display: block; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa__res i { font-style: normal; display: block; font-size: 13px; color: var(--graphite); margin-top: 1px; }
.pa__res .ic { font-size: 16px; color: var(--graphite); flex: none; }

.pa__empty { font-size: 14px; color: var(--graphite); text-align: center; padding: 26px 10px; margin: 0; }

/* the cart strip that rises when something is added */
/* PINNED TO THE PHONE, not to the scroll content.
   This was `position: sticky; bottom: 0`, which never worked: a sticky element
   can only travel inside its containing block, and its containing block is
   #paCartWrap — a div that shrink-wraps to the bar's own height. Zero travel
   means zero stick, so the cart sat at the END of the scrollable content and
   the visitor had to scroll down to discover there was a Checkout at all.
   `.pa` is position:relative and does NOT scroll (.pa__body is the scroller),
   so anchoring here pins the bar to the phone's visible bottom edge. */
.pa__cartbar {
  position: absolute; z-index: 6;
  /* clears the tab bar, which is visible on every screen now */
  inset-inline: 12px; bottom: calc(var(--pa-tabs, 64px) + 18px);
  margin: 0; padding: 12px 14px 13px;
  background: #fff; box-shadow: 0 10px 30px rgba(16, 19, 26, .18), 0 -2px 10px rgba(16, 19, 26, .05);
  border-radius: 20px;
}
/* room so the last result is never trapped behind the pinned bar */
.pa__view--cart { padding-bottom: 190px; }
/* The cart used to blink into existence the moment a product was picked, so
   visitors never registered that a Checkout button had appeared. It rises
   from under the phone's bottom edge instead, and the pay button glows twice
   to say "press me". Both are ONE-SHOT: `both` holds the end state, and the
   pulse is capped at 2 iterations, because an invitation that keeps nagging
   after it has been seen is worse than none. JS only adds .is-rising on the
   empty -> first-item transition, never on a quantity change. */
@keyframes paCartRise {
  from { transform: translateY(105%); opacity: .35; }
  to   { transform: translateY(0);    opacity: 1; }
}
.pa__cartbar.is-rising { animation: paCartRise .38s cubic-bezier(.22, .9, .3, 1.06) both; }
@keyframes paPayGlow {
  0%   { box-shadow: 0 0 0 0 rgba(27, 76, 235, .5); }
  45%  { box-shadow: 0 0 0 8px rgba(27, 76, 235, .26); }
  100% { box-shadow: 0 0 0 13px rgba(27, 76, 235, 0); }
}
.pa__cartbar.is-rising .pa__pay {
  animation: paPayGlow 1.25s ease-out .34s 2 both;
}
.pa__cartL { list-style: none; margin: 0 0 10px; padding: 0; }
.pa__cartL li { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; }
.pa__cartL em { flex: 1; min-width: 0; font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa__qty { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.pa__qty button {
  width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--rule);
  background: #fff; font: inherit; font-size: 15px; line-height: 1; cursor: pointer; color: var(--ink);
}
.pa__qty span { min-width: 16px; text-align: center; font-weight: 600; }
.pa__pay {
  width: 100%; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--blue); color: #fff; border: 0; border-radius: 16px; padding: 15px 18px;
}

/* ── expenses / quotations / customers / one customer ────────
   Four screens added 2026-09-16 to match the real app. They reuse the
   existing vocabulary (.pa__nav, .pa__grp, .pa__row, .pa__chip, .pa__tile)
   and only add what those did not already cover. */

/* period segment — Day | Month | Range */
.pa__seg {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  background: #EEF0F5; border-radius: 14px; padding: 4px; margin-bottom: 12px;
}
.pa__seg button {
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  border: 0; background: transparent; color: var(--graphite);
  border-radius: 11px; padding: 9px 4px;
}
.pa__seg button.is-on { background: var(--blue); color: #fff; }

/* month stepper */
.pa__month {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
}
.pa__month span { flex: 1; text-align: center; display: grid; gap: 2px; }
.pa__month b { font-size: 15px; font-weight: 700; }
.pa__month i { font-style: normal; font-size: 12px; color: var(--blue); }
.pa__mnav {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  background: #fff; border: 1px solid var(--rule); border-radius: 12px;
  cursor: pointer; color: var(--ink); font-size: 15px;
}
.pa__mnav--next .ic { transform: none; }

/* the big period total */
.pa__total {
  background: #E2E7FA; border-radius: 18px; padding: 16px 18px; margin-bottom: 14px;
  display: grid; gap: 4px;
}
.pa__totalCap { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--blue); }
.pa__total b { font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
.pa__total i { font-style: normal; font-size: 12.5px; color: var(--graphite); }

/* an expense line */
.pa__exp {
  display: flex; align-items: center; gap: 11px;
  background: #fff; border-radius: 14px; padding: 11px 13px; margin-bottom: 8px;
}
.pa__emoji {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  background: #FDF3DC; border-radius: 11px; font-size: 19px;
}
.pa__exp em { flex: 1; min-width: 0; font-style: normal; display: grid; gap: 2px; }
.pa__exp em b { font-size: 14px; font-weight: 600; }
.pa__exp em i { font-style: normal; font-size: 11.5px; color: var(--graphite); }
.pa__expAmt { font-size: 14px; font-weight: 700; flex: none; }

/* a quotation card */
.pa__quo { background: #fff; border-radius: 14px; padding: 12px 13px; margin-bottom: 8px; display: grid; gap: 5px; }
.pa__quoTop { display: flex; align-items: center; gap: 8px; }
.pa__quoTop b { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa__quo > i { font-style: normal; font-size: 12.5px; color: var(--graphite); }
.pa__quoFoot { display: flex; align-items: baseline; gap: 8px; }
.pa__quoFoot i { flex: 1; font-style: normal; font-size: 11.5px; color: var(--graphite); }
.pa__quoFoot b { font-size: 14px; font-weight: 700; }
.pa__badge2 {
  flex: none; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  border-radius: 999px; padding: 4px 9px; background: #EEF0F5; color: var(--graphite);
}
.pa__badge2--accepted { background: #E3F3EC; color: #0F7A49; }
.pa__badge2--sent  { background: #E5EEFD; color: var(--blue-deep); }
.pa__badge2--draft { background: #EEF0F5; color: var(--graphite); }
.pa__badge2--expired { background: #F3F0EC; color: #8A6A3A; }

/* a customer row */
.pa__cust {
  width: 100%; font: inherit; text-align: start; cursor: pointer;
  display: flex; align-items: center; gap: 11px;
  background: #fff; border: 0; border-radius: 14px; padding: 12px 13px; margin-bottom: 8px;
}
.pa__cust em { flex: 1; min-width: 0; font-style: normal; font-size: 14px; font-weight: 600; color: var(--ink); }
.pa__custR { flex: none; display: grid; justify-items: end; gap: 2px; }
.pa__custR b { font-size: 14px; font-weight: 700; color: #17B26A; }
.pa__custR i { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--graphite); }
.pa__clear { color: var(--graphite); }

/* one customer */
.pa__card { background: #fff; border-radius: 16px; padding: 15px; margin-bottom: 12px; display: grid; gap: 4px; }
.pa__partyName { font-size: 19px; font-weight: 700; }
.pa__cap2 { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--graphite); margin-top: 8px; }
.pa__partyPhone { font-size: 15px; font-weight: 600; color: var(--blue); }
.pa__partyAddr { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink); }
.pa__partyActs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 11px; }
.pa__pbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--rule); border-radius: 999px; padding: 9px;
  font-size: 13px; font-weight: 600; color: var(--blue);
}
.pa__bal {
  background: #E3F3EC; border-radius: 18px; padding: 15px 17px; margin-bottom: 12px;
  display: grid; gap: 3px; justify-items: start;
}
.pa__bal > span:first-child { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #0F7A49; }
.pa__bal b { font-size: 29px; font-weight: 700; color: #0F7A49; letter-spacing: -.02em; }
.pa__bal--clear { background: #EEF0F5; }
.pa__bal--clear > span:first-child, .pa__bal--clear b { color: var(--graphite); }
.pa__settle {
  width: 100%; text-align: center; margin-top: 9px;
  background: #fff; border: 1px solid #9FD9BD; border-radius: 999px; padding: 10px;
  font-size: 14px; font-weight: 600; color: #0F7A49;
}
.pa__bal--clear .pa__settle { border-color: var(--rule); color: var(--graphite); }

.pa__empty { margin: 18px 0; text-align: center; font-size: 13px; color: var(--graphite); }

/* the day's total is a link into Reports now */
.pa__net[data-pgo] { cursor: pointer; }

/* ── self-playing flows: add purchase / add to catalog ──────── */
.pa__flowCap { font-size: 12px; color: var(--graphite); margin-bottom: 10px; }
.pa__find--flow { pointer-events: none; }
.pa__typed { flex: 1; font-size: 14px; color: var(--ink); display: inline-flex; align-items: center; }
/* the blinking cursor that sells "it is typing" */
.pa__caret {
  display: inline-block; width: 1.5px; height: 15px; margin-inline-start: 2px;
  background: var(--blue); animation: paBlink 1s steps(1) infinite;
}
@keyframes paBlink { 50% { opacity: 0; } }

.pa__flowList { display: grid; gap: 6px; margin: 10px 0; }
.pa__flowLine {
  display: flex; align-items: center; gap: 9px;
  background: #fff; border-radius: 12px; padding: 10px 12px; font-size: 13px;
}
.pa__flowLine em { flex: 1; min-width: 0; font-style: normal; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa__flowQ { flex: none; font-weight: 700; color: var(--blue); }
.pa__flowLine b { flex: none; font-weight: 700; }
.pa__flowFoot {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 4px 2px 10px; font-size: 13px; color: var(--graphite);
}
.pa__flowFoot b { font-size: 16px; color: var(--ink); }

.pa__flowDone {
  display: grid; justify-items: center; gap: 4px; text-align: center;
  background: #E3F3EC; border-radius: 18px; padding: 22px 16px; margin-top: 12px;
  animation: paDoneIn .34s cubic-bezier(.22, .9, .3, 1.06) both;
}
.pa__flowDone .ic { font-size: 24px; color: #0F7A49; }
.pa__flowDone b { font-size: 16px; font-weight: 700; color: #0F7A49; }
.pa__flowDone i { font-style: normal; font-size: 13px; color: #2F6B50; }
@keyframes paDoneIn { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }

/* catalog form rows fill one at a time */
.pa__field {
  background: #fff; border: 1px solid var(--rule); border-radius: 12px;
  padding: 10px 12px; margin-bottom: 8px; display: grid; gap: 3px;
  transition: border-color .2s ease;
}
.pa__field.is-filled { border-color: #C7D4F7; }
.pa__fieldL { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--graphite); }
.pa__fieldV { min-height: 18px; font-size: 14px; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; }

/* Home cards became real buttons — keep them looking identical to the divs
   they replaced, and make the whole card the target. */
.pa__act, .pa__quick, .pa__due {
  font: inherit; text-align: start; cursor: pointer; border: 0; width: 100%;
}

/* ── chips / filters ──────────────────────────────────────── */
.pa__chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 12px; }
.pa__chips::-webkit-scrollbar { display: none; }
.pa__chip {
  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; flex: none;
  background: #fff; border: 1px solid var(--rule); border-radius: 999px; padding: 9px 16px; color: var(--ink);
}
.pa__chip.is-on { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }
.pa__iconchip {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  background: #fff; border: 1px solid var(--rule); border-radius: 999px;
  font-size: 17px; color: var(--ink);
}

/* ── Inventory ────────────────────────────────────────────── */
.pa__kpis { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 12px; }
.pa__kpis::-webkit-scrollbar { display: none; }
.pa__kpi {
  flex: none; min-width: 132px;
  background: #fff; border: 1px solid var(--rule); border-radius: 16px; padding: 12px 14px;
}
.pa__kpi.is-on { border-color: var(--blue); border-width: 1.5px; background: #F2F5FF; }
.pa__kpi b { display: block; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.pa__kpi i { font-style: normal; display: flex; align-items: center; gap: 5px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--graphite); margin-top: 3px; }
.pa__kpi i::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pa__kpi--val b { color: var(--blue); }
.pa__kpi--val i { color: var(--blue); }
.pa__kpi--low b { color: #D98315; }
.pa__kpi--low i { color: #D98315; }

.pa__prod {
  width: 100%; text-align: start; font: inherit; color: inherit; cursor: default;
  border: 0; display: flex; align-items: center; gap: 12px;
  background: #fff; border-radius: 16px; padding: 13px; margin-bottom: 10px;
}
.pa__prod em { flex: 1; min-width: 0; font-style: normal; }
.pa__prod em b { display: block; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa__prod em i { font-style: normal; display: block; font-size: 12.5px; color: var(--graphite); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa__prodR { flex: none; text-align: end; }
.pa__prodR > b { display: block; font-size: 15px; font-weight: 600; }
.pa__prodR > i { font-style: italic; font-size: 13px; color: var(--graphite); }
.pa__pill {
  display: inline-block; margin-top: 5px;
  font-size: 12px; font-weight: 500; border-radius: 999px; padding: 3px 10px;
  background: #FCEFD8; color: #B4700F;
}
.pa__pill--out { background: #FDE9E9; color: #C33131; }

/* ── More ─────────────────────────────────────────────────── */
.pa__grp { background: #fff; border-radius: 18px; margin-bottom: 16px; overflow: hidden; }
.pa__row {
  width: 100%; text-align: start; font: inherit; color: inherit;
  border: 0; background: none; cursor: default;
  display: flex; align-items: center; gap: 12px; padding: 11px 14px;
}
.pa__row + .pa__row { box-shadow: inset 0 1px 0 var(--rule); }
.pa__row em { flex: 1; min-width: 0; font-style: normal; }
.pa__row em b { display: block; font-size: 15px; font-weight: 500; }
.pa__row em i { font-style: normal; display: block; font-size: 12.5px; color: var(--graphite); margin-top: 1px; }
.pa__row > .ic { font-size: 16px; color: #B6BCC9; flex: none; }
.pa__row[data-pgo] { cursor: pointer; }
.pa__badge {
  flex: none; min-width: 20px; height: 20px; border-radius: 999px;
  background: #E5322D; color: #fff; font-size: 12px; font-weight: 600;
  display: grid; place-items: center; padding: 0 6px;
}

/* ── Reports ──────────────────────────────────────────────── */
.pa__rev {
  background: linear-gradient(168deg, #D9DFF6 0%, #E8ECF9 62%, #F1F3FA 100%);
  border-radius: 20px; padding: 15px; margin-bottom: 12px;
}
.pa__revTop { display: flex; align-items: center; gap: 8px; }
.pa__revTop .ic { font-size: 16px; color: var(--blue); }
.pa__revTop .pa__netCap { flex: 1; }
.pa__delta {
  font-size: 12px; font-weight: 600; border-radius: 999px; padding: 3px 9px;
  background: #FBE3EA; color: #C2245B; display: inline-flex; align-items: center; gap: 3px;
}
.pa__delta--up { background: #DFF3E9; color: #0B7A52; }
.pa__rev > b { display: block; font-size: 34px; font-weight: 600; letter-spacing: -.03em; line-height: 1.2; margin-top: 6px; }
.pa__rev > i { font-style: normal; font-size: 13px; color: var(--graphite); }

.pa__mini { background: #fff; border-radius: 16px; padding: 13px; }
.pa__miniH { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--graphite); }
.pa__miniH .pa__tile { width: 22px; height: 22px; border-radius: 7px; font-size: 12px; }
.pa__mini > b { display: block; font-size: 24px; font-weight: 600; letter-spacing: -.02em; margin: 7px 0 2px; }
.pa__mini > i { font-style: normal; display: block; font-size: 12px; color: var(--graphite); }

.pa__flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pa__flow i { font-style: normal; display: flex; align-items: center; gap: 4px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--graphite); }
.pa__flow .ic { font-size: 12px; }
.pa__flow b { display: block; font-size: 17px; font-weight: 600; margin-top: 4px; }
.pa__flow .in b { color: #0F9464; }
.pa__flow .out b { color: #D63B3B; }

.pa__trend { height: 96px; position: relative; margin-top: 12px; }
.pa__trend svg { width: 100%; height: 100%; display: block; overflow: visible; }
.pa__axis { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--graphite); margin-top: 8px; }
.pa__peak { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--graphite); margin-inline-start: auto; }

.pa__note {
  font-size: 13px; border-radius: 14px; padding: 12px 14px;
  display: flex; align-items: center; gap: 8px;
}
.pa__note .ic { font-size: 15px; flex: none; }
.pa__note--amber { background: #FCF2E0; color: #96620C; }
.pa__note--red { background: #FCEBEB; color: #B32E2E; }
.pa__note b { font-weight: 600; }
.pa__note s { flex: 1; text-decoration: none; }
.pa__note u { text-decoration: underline; font-size: 12.5px; white-space: nowrap; }

.pa__kv { display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding: 4px 0; }
.pa__kv + .pa__kv { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--rule); }
.pa__kv i { font-style: normal; color: var(--graphite); }

/* ── Activity ─────────────────────────────────────────────── */
.pa__feed { list-style: none; margin: 0 0 12px; padding: 0; background: #fff; border-radius: 18px; overflow: hidden; }
.pa__feed li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.pa__feed li + li { box-shadow: inset 0 1px 0 var(--rule); }
.pa__feed em { flex: 1; min-width: 0; font-style: normal; }
.pa__feed em b { display: block; font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa__feed em i { font-style: normal; display: block; font-size: 12.5px; color: var(--graphite); margin-top: 1px; }
.pa__feed > li > b { flex: none; font-size: 15px; font-weight: 600; }
.pa__feed .neg { color: #D63B3B; }

/* ── tab bar ──────────────────────────────────────────────── */
.pa__tabs {
  flex: none;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: #fff; padding: 10px 0 4px;
  box-shadow: 0 -1px 0 rgba(16, 19, 26, .06);
}
.pa__tab {
  font: inherit; border: 0; background: none; cursor: pointer;
  display: grid; justify-items: center; gap: 4px;
  font-size: 11.5px; color: var(--graphite); padding: 2px 0;
}
.pa__tab .ic { font-size: 22px; }
.pa__tab em { font-style: normal; }
.pa__tab.is-on { color: var(--blue); font-weight: 600; }
/* The tab bar stays on EVERY screen — demo decision, 2026-09-16.
   The real app hides it on a pushed screen and relies on the back chevron,
   which is right on a phone with a system back gesture. In a scaled mock on a
   landing page it strands the visitor: they open Expenses, and the only way
   home is a small chevron they may not spot. Keeping the tabs visible means
   there is always an obvious way back. The back chevron stays too. */
.pa--pushed .pa__tabs { display: grid; }

/* No gesture bar drawn, and only a thin strip of white below the tab bar —
   the first hero's proportion. Its height feeds the fold that
   .pa__card--fold is measured against, so changing it means re-measuring. */
.pa__ind { flex: none; background: #fff; height: 9px; display: block; }

/* ── inviting the visitor in ──────────────────────────────────
   A hero reads as a picture until something answers the cursor. These
   are the only two signals: a single ring on the Sell card a few seconds
   after landing, and press/hover feedback on everything that genuinely
   does something. Both die the moment the visitor interacts. */
/* A filled halo spreading out of the card, on a loop until the visitor
   engages. box-shadow rather than a positioned ::after on purpose: a shadow
   paints outside the border box and BEHIND the background with no stacking
   games, so it can never tint the card or cover its text. 14px of spread is
   the most that fits — the view's 16px side padding is all the room there is
   before .pa__body's overflow clips it. */
.pa__sell { position: relative; }
.pa__sell.is-nudge {
  animation: paPulse 1.9s cubic-bezier(.22, .61, .36, 1) infinite;
}
@keyframes paPulse {
  0%   { box-shadow: 0 0 0 0 rgba(27, 76, 235, .5); }
  /* holds its colour while it spreads — without this midpoint the alpha
     interpolates away before the ring is wide enough to read */
  35%  { box-shadow: 0 0 0 9px rgba(27, 76, 235, .34); }
  72%  { box-shadow: 0 0 0 14px rgba(27, 76, 235, 0); }
  100% { box-shadow: 0 0 0 0 rgba(27, 76, 235, 0); }
}

/* press feedback — on every pointer, because a tap deserves an answer too */
.pa__sell, .pa__tab, .pa__row[data-pgo], .pa__res button, .pa__chip,
.pa__back, .pa__pay, .pa__lang, .pa__zoom button, .pa__qty button, .pa__clear {
  transition: background-color .13s ease, color .13s ease,
              border-color .13s ease, scale .13s ease, filter .13s ease;
}
.pa__sell:active, .pa__pay:active { scale: .985; }
.pa__row[data-pgo]:active, .pa__res button:active { background: #EEF2FF; }
.pa__tab:active .ic, .pa__back:active, .pa__lang:active { scale: .92; }

@media (pointer: fine) {
  .pa__sell:hover { background: var(--blue-lift); }
  .pa__sell:hover .pa__go { background: rgba(255, 255, 255, .34); }
  .pa__tab:hover { color: var(--ink); }
  .pa__tab.is-on:hover { color: var(--blue); }
  .pa__row[data-pgo]:hover { background: #F5F7FF; }
  .pa__res button:hover { background: #F5F7FF; }
  .pa__chip:hover:not(.is-on) { border-color: var(--blue); color: var(--blue); }
  .pa__back:hover, .pa__lang:hover { background: #F2F5FF; }
  .pa__pay:hover { background: var(--blue-lift); }
  .pa__qty button:hover, .pa__clear:hover { border-color: var(--blue); color: var(--blue); }
  .pa__zoom button:hover:not(.is-on) { color: #fff; }
}

/* success flash */
.pa__done {
  position: absolute; inset: 0; z-index: 4;
  display: grid; place-content: center; justify-items: center; gap: 8px;
  background: rgba(242, 244, 248, .94);
  font-size: 18px; font-weight: 600; text-align: center; padding: 24px;
}
.pa__done[hidden] { display: none; }   /* a display rule outranks [hidden] */
.pa__done i { font-style: normal; font-size: 30px; font-weight: 600; letter-spacing: -.02em; color: var(--blue); }
.pa__done i[hidden] { display: none; }
/* ── the desktop app in a laptop ───────────────────────────────
   Same device language as the hero: front-on, white frame, neutral
   shadow, no motion. The screen is DRAWN, so its parts can be made
   interactive later without swapping an image out. */
.shots { padding-bottom: var(--band); }
/* Back to left-aligned, 2026-09-15. Briefly centred; the founder reverted it
   once the section gained a right-hand column — a centred title over a
   two-column header reads as neither. NOTE for anyone re-centring later:
   `text-align` alone will NOT do it. `.h2` carries `max-width: 30ch` and
   `.shots__sub` `max-width: 56ch`, neither with a horizontal margin, so the
   box stays flush left and only the text centres inside it. Needs
   `margin-inline: auto` as well. */
/* One column. A right-hand column here held a second block of body copy and
   read as two paragraphs competing — heading, description and hook now stack
   and build into the demo below. Founder's call, 2026-09-15. */
/* Centred as a column — founder's call, 2026-09-16. `text-align` alone does
   NOT centre this: every child carries its own max-width with no horizontal
   margin, so the BOX stays flush left and only the text centres inside it.
   Each child needs `margin-inline: auto` as well, which is why they all
   restate their margins below.
   The measures are deliberately narrower than when this was left-aligned —
   centred text needs a shorter line to read as a shape rather than a slab —
   and `text-wrap: balance` evens the line lengths so no line is left with one
   stray word under a full one, which is what made it look lopsided. */
.shots__head {
  margin-bottom: clamp(32px, 4.5vw, 56px);
  text-align: center;
}
.shots__head .h2 {
  max-width: 26ch; margin: 0 auto;
  text-wrap: balance;
}

/* The hook: the one line in this section meant to be READ rather than
   scanned, so it gets weight and brand colour while staying well under the
   h2. Not a button and not a link — it makes a claim.
   Moved BELOW the laptop 2026-09-16 (founder's call): the claim now lands as
   the closing line after the proof rather than as a promise before it. It is
   no longer inside `.shots__head`, so it has to restate `text-align: center`
   — the section itself is left-aligned. The top margin is bigger than it was
   in the head: the laptop casts a deep shadow, and the old head spacing put
   the line inside it. */
.shots__hook {
  text-align: center;
  margin: clamp(30px, 3.6vw, 48px) auto 0;
  text-wrap: balance;
  font-family: var(--display);
  font-size: clamp(1.12rem, 1.9vw, 1.45rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--blue);
  max-width: 34ch;
}
/* Removed 2026-09-15: the "this screen really works" hint (`.shots__try`),
   which only ever showed once the laptop demo was wide enough to actually be
   interactive (`WA_LIVE_MIN` in main.js). Founder's call, confirmed twice —
   raised once that it was the only cue telling a visitor the laptop below
   is clickable, kept it redesigned that same session, then asked again after
   seeing the redesign and removal was the real decision. The `.shots.is-live`
   / `:not(.is-live)` split on this margin existed only to give the subtext
   different room depending on whether that hint was about to render below
   it — with the hint gone there is only one "next thing" (the laptop), so
   one margin now covers both states. `sec.classList.toggle('is-live', ...)`
   in main.js is correspondingly dead and was removed with it. */
/* Left-aligned again; .shots__head owns the gap down to the laptop now. */
/* Black, not the usual grey: founder's call 2026-09-16 — this paragraph is
   the section's only body copy now and reads as a statement, not a caption. */
.shots__sub {
  color: var(--ink); max-width: 50ch;
  margin: clamp(16px, 1.8vw, 22px) auto 0;
  text-wrap: balance;
}

.laptop { width: 100%; max-width: 980px; margin-inline: auto; position: relative; }

.laptop__lid {
  position: relative;
  border-radius: 16px 16px 6px 6px;
  padding: 10px 10px 16px;
  background: linear-gradient(152deg, #FFFFFF 0%, #FAFBFD 44%, #EDF0F6 100%);
  box-shadow:
    0 2px 3px rgba(16, 19, 26, .06),
    0 8px 16px rgba(16, 19, 26, .07),
    0 24px 44px rgba(16, 19, 26, .09),
    inset 0 2px 1px rgba(255, 255, 255, 1),
    inset 0 0 0 1px rgba(16, 19, 26, .09);
}
.laptop__lid::after {                       /* camera dot */
  content: ''; position: absolute; left: 50%; translate: -50% 0; bottom: 6px;
  width: 4px; height: 4px; border-radius: 50%; background: rgba(16, 19, 26, .18);
}
.laptop__screen {
  border-radius: 8px; overflow: hidden;
  background: #F4F6FA;
  box-shadow: inset 0 0 0 1px rgba(16, 19, 26, .06);
  aspect-ratio: 16 / 9.4;
}
.laptop__base {
  position: relative; height: 13px;
  width: 107%; margin-inline: -3.5%;
  border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, #F2F4F9 0%, #E2E6EF 60%, #D6DBE6 100%);
  box-shadow:
    0 3px 4px rgba(16, 19, 26, .07),
    0 18px 30px -10px rgba(16, 19, 26, .16),
    0 46px 70px -26px rgba(16, 19, 26, .22),
    inset 0 1px 0 rgba(255, 255, 255, .9);
}
.laptop__base::after {                      /* ground contact shadow */
  content: ''; position: absolute; z-index: -1;
  left: 5%; right: 5%; bottom: -22px; height: 42px;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(16, 19, 26, .3) 0%, rgba(16, 19, 26, .12) 44%, transparent 72%);
  filter: blur(16px);
}
.laptop__notch {
  position: absolute; left: 50%; translate: -50% 0; top: 0;
  width: 86px; height: 5px; border-radius: 0 0 6px 6px;
  background: rgba(16, 19, 26, .09);
}

/* ── the drawn web app ─────────────────────────────────────── */
.wa {
  /* Authored once at a fixed 960px canvas and SCALED to the lid, rather than
     reflowed. A dashboard that reflows stops looking like a dashboard, and the
     scale keeps hit targets proportional for the interaction work to come. */
  width: 960px; height: 564px;
  transform-origin: top left;
  transform: scale(var(--wa-scale, 1));
  display: grid; grid-template-columns: 168px minmax(0, 1fr);
  font-size: 10px; line-height: 1.4; color: var(--ink);
}
.wa__side {
  background: #fff; border-inline-end: 1px solid var(--rule);
  padding: 11px 10px 0; display: flex; flex-direction: column; overflow: hidden;
}
.wa__navscroll {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; gap: 1px;
  scrollbar-width: thin;
}
.wa__navscroll::-webkit-scrollbar { width: 5px; }
.wa__navscroll::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 3px; }
.wa__brand { display: flex; align-items: center; gap: 7px; margin-bottom: 11px; }
.wa__gp {
  width: 22px; height: 22px; flex: none; display: grid; place-items: center;
  border-radius: 7px; background: var(--blue); color: #fff;
  font-size: 8.5px; font-weight: 700; letter-spacing: .02em;
}
.wa__gp--sm { width: 18px; height: 18px; font-size: 7.5px; background: #E6EDFF; color: var(--blue); }
.wa__brand b { font-size: 11px; font-weight: 600; }
.wa__search {
  display: flex; align-items: center; gap: 6px;
  background: #F4F6FA; border-radius: 8px; padding: 6px 8px; margin-bottom: 11px;
  color: var(--graphite); font-size: 9.5px;
}
.wa__search em { font-style: normal; }
.wa__search .ic { font-size: 11px; }
.wa__grp {
  flex: none;
  font-size: 7px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--graphite); padding: 7px 6px 3px;
}
.wa__nav {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 8px;
  color: var(--ink); font-size: 10.5px;
}
.wa__nav .ic { font-size: 13px; color: var(--graphite); }
.wa__nav em { font-style: normal; }
.wa__nav.is-on { background: #EEF3FF; color: var(--blue); font-weight: 600; }
.wa__nav.is-on .ic { color: var(--blue); }
.wa__user {
  flex: none; display: flex; align-items: center; gap: 7px;
  border-top: 1px solid var(--rule); padding: 8px 0 11px; font-size: 9.5px;
  white-space: nowrap;
}
.wa__user em { font-style: normal; font-weight: 500; }

.wa__main { padding: 12px 14px; min-width: 0; position: relative; }
.wa__view { display: none; height: 100%; flex-direction: column; gap: 8px; }
.wa__view.is-on { display: flex; }

/* nav items and the big CTA are real buttons now — strip the UA styling */
.wa__nav, .wa__act, .wa__back, .wa__pay, .wa__resrow, .wa__ghost, .wa__step, .wa__rm {
  font: inherit; color: inherit; text-align: start;
  border: 0; background: none; padding: 0; margin: 0;
  cursor: pointer;
}
.wa__nav { flex: none; padding: 5px 8px; width: 100%; }
.wa__act { border: 1px solid var(--rule); }
.wa :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
.wa--live .wa__nav:hover { background: #F1F4FA; }
.wa--live .wa__act:hover { border-color: var(--blue); }
.wa--live .wa__act--go:hover { background: var(--blue-deep); }

/* ── the till (sell + purchase) ─────────────────────────────
   Traced from the real /sell screen. Charges, salesperson and note
   are intentionally absent so the whole job fits one screen. */
.wa__shead { display: flex; align-items: baseline; gap: 9px; }
.wa__shead > b { font-size: 15px; font-weight: 700; }
.wa__sub { font-size: 9.5px; color: var(--graphite); }
.wa__back {
  width: 24px; height: 24px; display: grid; place-items: center; flex: none;
  border-radius: 7px; background: #fff; border: 1px solid var(--rule);
  font-size: 12px; color: var(--graphite); rotate: 180deg; align-self: center;
}
.wa--live .wa__back:hover { color: var(--ink); border-color: var(--ink); }

.wa__till { display: grid; grid-template-columns: minmax(0, 1fr) 236px; gap: 12px; flex: 1; min-height: 0; }
.wa__tmain { position: relative; display: flex; flex-direction: column; gap: 9px; min-height: 0; }

.wa__q {
  display: flex; align-items: center; gap: 8px; flex: none;
  background: #fff; border: 1px solid var(--rule); border-radius: 999px; padding: 8px 14px;
}
.wa__q .ic { font-size: 13px; color: var(--graphite); flex: none; }
.wa__q input {
  flex: 1; min-width: 0; font: inherit; font-size: 11px; color: var(--ink);
  border: 0; background: none; outline: none; padding: 0;
}
.wa__q input::placeholder { color: var(--graphite); }
.wa__q:focus-within { border-color: var(--blue); }
.wa__caret { width: 1.5px; height: 13px; background: var(--blue); animation: waBlink 1s steps(1) infinite; }
@keyframes waBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.wa__res {
  background: #fff; border: 1px solid var(--rule); border-radius: 14px;
  box-shadow: 0 10px 26px -10px rgba(16, 19, 26, .18);
  overflow: hidden; flex: none;
}
.wa__resrow {
  font: inherit; text-align: start; cursor: pointer; width: 100%;
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border: 0; background: none;
}
.wa__resrow + .wa__resrow { border-top: 1px solid var(--rule); }
.wa__resrow em { font-style: normal; flex: 1; min-width: 0; }
.wa__resrow em b { display: block; font-size: 10px; font-weight: 600; }
.wa__resrow em i { font-style: normal; font-size: 8px; color: var(--graphite); }
.wa__resrow > b { font-size: 11px; font-weight: 700; }
.wa--live .wa__resrow:hover, .wa__resrow.is-hit { background: #EEF3FF; }

.wa__mt {
  flex: 1; display: grid; place-content: center; justify-items: center; gap: 5px;
  border: 1px dashed var(--rule); border-radius: 14px; text-align: center;
}
.wa__mtico {
  width: 34px; height: 34px; display: grid; place-items: center; margin-bottom: 3px;
  border-radius: 50%; background: #E6EDFF; color: var(--blue); font-size: 16px;
}
.wa__mt b { font-size: 12px; font-weight: 700; }
.wa__mt i { font-style: normal; font-size: 9px; color: var(--graphite); }

.wa__lines {
  list-style: none; margin: 0; padding: 0; overflow: auto; flex: 1; min-height: 0;
  background: #fff; border: 1px solid var(--rule); border-radius: 14px;
}
.wa__lines li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; }
.wa__lines li + li { border-top: 1px solid var(--rule); }
.wa__lines em { font-style: normal; flex: 1; min-width: 0; }
.wa__lines em b { display: block; font-size: 10px; font-weight: 600; }
.wa__lines em i { font-style: normal; font-size: 8px; color: var(--graphite); }
.wa__lines .wa__lp { font-size: 11px; font-weight: 700; min-width: 52px; text-align: end; }
.wa__qty { display: inline-flex; align-items: center; gap: 7px; flex: none; }
.wa__step {
  width: 18px; height: 18px; display: grid; place-items: center;
  border-radius: 6px; border: 1px solid var(--rule); background: #fff;
  font-size: 11px; line-height: 1; color: var(--ink);
}
.wa--live .wa__step:hover { border-color: var(--blue); color: var(--blue); }
.wa__qty span { font-size: 10px; font-variant-numeric: tabular-nums; min-width: 10px; text-align: center; }
.wa__rm { font-size: 12px; color: var(--graphite); line-height: 1; flex: none; }
.wa--live .wa__rm:hover { color: #B3261E; }

.wa__tside { display: flex; flex-direction: column; gap: 9px; min-height: 0; }
.wa__tot { background: #fff; border: 1px solid var(--rule); border-radius: 14px; padding: 11px 13px; }
.wa__tot b { display: block; font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.wa__tot i {
  font-style: normal; display: inline-block; margin-top: 4px;
  background: #F1F4FA; border-radius: 999px; padding: 2px 8px; font-size: 8.5px; color: var(--graphite);
}
.wa__card { background: #fff; border: 1px solid var(--rule); border-radius: 14px; padding: 10px 11px; }
.wa__cardhd { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.wa__ci {
  width: 20px; height: 20px; flex: none; display: grid; place-items: center;
  border-radius: 7px; background: #E6EDFF; color: var(--blue); font-size: 11px;
}
.wa__cardhd b { font-size: 10.5px; font-weight: 600; }
.wa__cardhd i {
  font-style: normal; margin-inline-start: auto; font-size: 7px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--graphite);
}
.wa__ghost {
  font: inherit; cursor: pointer; width: 100%;
  border: 1px dashed var(--rule); background: none; border-radius: 9px;
  padding: 6px; font-size: 9.5px; color: var(--graphite);
}
.wa--live .wa__ghost:hover { border-color: var(--blue); color: var(--blue); }
.wa__seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 8px; }
.wa__seg span {
  text-align: center; border-radius: 7px; padding: 4px; font-size: 9px;
  border: 1px solid var(--rule); color: var(--graphite);
}
.wa__seg .is-on { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }
.wa__payrow { display: flex; justify-content: space-between; align-items: baseline; font-size: 9.5px; color: var(--graphite); }
.wa__payrow b { font-size: 11px; color: var(--ink); }

.wa__pay {
  margin-top: auto; width: 100%; background: var(--blue); color: #fff;
  border-radius: 10px; padding: 9px; font-size: 11px; font-weight: 600; text-align: center;
}
.wa__pay[disabled] { background: #C7D0E4; cursor: not-allowed; }
.wa--live .wa__pay:not([disabled]):hover, .wa__pay.is-hit { background: var(--blue-deep); }

.wa__done[hidden] { display: none; }
.wa__done {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-content: center; justify-items: center; gap: 6px;
  background: rgba(244, 246, 250, .94); backdrop-filter: blur(2px);
}
.wa__tick {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(15, 148, 100, .12); color: #0F9464; font-size: 20px;
}
.wa__done b { font-size: 13px; font-weight: 700; }
.wa__done i { font-style: normal; font-size: 18px; font-weight: 700; color: var(--blue); }

/* ── shared bits for the JS-rendered views ─────────────────── */
.wa__note { margin: 0; font-size: 9.5px; color: var(--graphite); }
.wa__note b { font-weight: 600; color: var(--ink); }

.wa__chips { display: flex; gap: 5px; margin-inline-start: auto; }
.wa__chip2 {
  font: inherit; font-size: 9px; cursor: pointer;
  background: #fff; border: 1px solid var(--rule); border-radius: 999px;
  padding: 3px 9px; color: var(--graphite);
}
.wa--live .wa__chip2:hover { border-color: var(--blue); color: var(--blue); }
.wa__chip2.is-on { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }

.wa__mini.wa__mini--3 { grid-template-columns: repeat(3, 1fr); }

.wa__rows { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--rule); border-radius: 12px; overflow: auto; }
.wa__rows li { display: flex; align-items: center; gap: 9px; padding: 8px 11px; }
.wa__rows li + li { border-top: 1px solid var(--rule); }
.wa__rows em { font-style: normal; flex: 1; min-width: 0; }
.wa__rows em b { display: block; font-size: 9.5px; font-weight: 600; }
.wa__rows em i { font-style: normal; font-size: 8px; color: var(--graphite); }
.wa__rows > li > b, .wa__rows button > b { font-size: 10px; font-weight: 700; }
.wa__rows .is-due { color: #B45309; }
.wa__rows--tap li { padding: 0; }
.wa__rows--tap button {
  font: inherit; color: inherit; text-align: start; border: 0; background: none; cursor: pointer;
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 11px;
}
.wa--live .wa__rows--tap button:hover { background: #F4F6FA; }

.wa__badge { font-size: 7.5px; font-weight: 600; border-radius: 999px; padding: 2px 7px; flex: none; }
.wa__badge--ok, .wa__badge--accepted, .wa__badge--delivered { background: rgba(15,148,100,.12); color: #0F7A54; }
.wa__badge--low, .wa__badge--pending, .wa__badge--sent { background: rgba(217,119,6,.13); color: #9A5B0C; }
.wa__badge--out, .wa__badge--expired { background: rgba(190,30,45,.1); color: #B3261E; }
.wa__badge--draft { background: #EDF0F6; color: var(--graphite); }
.wa__badge--active { background: rgba(27,76,235,.1); color: var(--blue); }

.wa__due {
  background: #FFF7ED; border: 1px solid #FBD9A5; border-radius: 12px; padding: 11px 13px;
  display: flex; justify-content: space-between; align-items: baseline;
}
.wa__due span { font-size: 8px; letter-spacing: .1em; text-transform: uppercase; color: #9A5B0C; }
.wa__due b { font-size: 20px; font-weight: 700; color: #9A5B0C; }
.wa__due.is-clear { background: rgba(15,148,100,.07); border-color: rgba(15,148,100,.25); }
.wa__due.is-clear span, .wa__due.is-clear b { color: #0F7A54; }

.wa__acctwrap .wa__cap { margin-bottom: 8px; }
.wa__accs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.wa__acc {
  font: inherit; text-align: start; cursor: pointer;
  background: #fff; border: 1px solid var(--rule); border-radius: 12px; padding: 9px 10px;
  display: flex; flex-direction: column; gap: 2px;
}
.wa__acc i { font-style: normal; font-size: 7.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--graphite); }
.wa__acc b { font-size: 10px; font-weight: 600; }
.wa__acc u { text-decoration: none; font-size: 12px; font-weight: 700; color: var(--blue); }
.wa__acc.is-on { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.wa--live .wa__acc:hover { border-color: var(--blue); }

/* compact, SEPARATED variant for the Home strip — each account keeps its
   own bordered box (unlike the touching bar this replaced), but lays out
   icon + name + balance in one row so 4 boxes fit one line without the
   canvas overflowing its fixed 564px height. */
.wa__acc--flat { flex-direction: row; align-items: center; gap: 8px; padding: 8px 10px; }
.wa__acc--flat .wa__abadge { margin-bottom: 0; }
.wa__acct { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wa__acc--flat u { font-size: 11px; white-space: nowrap; }

/* brand badges. bKash pink and Nagad orange are the real brand colours;
   the mark itself is a monogram, not a copy of their artwork. */
.wa__abadge {
  width: 22px; height: 22px; margin-bottom: 2px; flex: none;
  display: grid; place-items: center; border-radius: 7px;
  font-size: 9px; font-weight: 700; color: #fff; letter-spacing: -.02em;
}
.wa__abadge .ic { font-size: 12px; }
.wa__abadge--cash { background: #EEF3FF; color: var(--blue); }
.wa__abadge--bank { background: #EEF3FF; color: var(--blue); }
.wa__abadge--bkash { background: #E2136E; }
.wa__abadge--nagad { background: linear-gradient(135deg, #F7941D 0%, #EE3423 100%); font-size: 11px; }

.wa__sfind--solo { flex: none; }
.wa__shead .wa__chips { margin-inline-start: auto; }

/* interaction is gated on the screen being big enough to hit — see main.js */
.wa:not(.wa--live) .wa__nav, .wa:not(.wa--live) .wa__act,
.wa:not(.wa--live) .wa__resrow, .wa:not(.wa--live) .wa__pay { cursor: default; }

.wa__top {
  display: flex; justify-content: space-between; align-items: center;
  color: var(--graphite); font-size: 9.5px;
}
.wa__lang { display: inline-flex; background: #fff; border-radius: 999px; padding: 2px; gap: 2px; }
.wa__lang em { font-style: normal; padding: 2px 6px; border-radius: 999px; font-size: 8.5px; }
.wa__lang .on { background: var(--blue); color: #fff; font-weight: 600; }

.wa__cap { display: block; font-size: 7.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--blue); }
.wa__cap--g { color: var(--graphite); margin-bottom: 6px; }
.wa__cap--mt { margin-top: 8px; }

.wa__kpi {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  background: linear-gradient(168deg, #DCE3F7 0%, #E9EDF9 62%, #F2F4FB 100%);
  border-radius: 14px; padding: 13px 15px;
}
.wa__kpi > div > b { display: block; font-size: 30px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
.wa__kpirow { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 9px; color: var(--graphite); }
.wa__kpirow i { font-style: normal; }
.wa__chip {
  display: inline-flex; align-items: center; gap: 3px;
  background: rgba(15, 148, 100, .12); color: #0F9464;
  border-radius: 999px; padding: 2px 7px; font-weight: 600;
}
.wa__chip .ic { font-size: 9px; }
.wa__spark { width: 150px; height: 42px; color: var(--blue); flex: none; }

.wa__acts { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 8px; }
.wa__act {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--rule); border-radius: 12px; padding: 9px 10px;
}
.wa__act .ic { font-size: 15px; color: var(--blue); flex: none; }
.wa__act b { display: block; font-size: 10px; font-weight: 600; }
.wa__act i { font-style: normal; font-size: 8.5px; color: var(--graphite); }
.wa__act--go { background: var(--blue); border-color: var(--blue); color: #fff; }
/* The laptop's Sell card rings exactly like the hero phone's (.pa__sell
   .is-nudge / paPulse) — same easing, same 1.9s loop, same "stops for good on
   first interaction" contract. Two differences, both forced by this mock:
   1. The whole .wa canvas is transform-scaled (--wa-scale, 960px authored
      down to lid width), so a px spread here is scaled on screen too. The
      spread is larger than the phone's 14px to survive that reduction.
   2. It only ever rings while .wa--live, i.e. when the demo is actually
      clickable (WA_LIVE_MIN) — never claim interactivity where the hit
      targets are too small, same rule the rest of this mock follows. */
.wa--live .wa__act--go.is-nudge {
  animation: waPulse 1.9s cubic-bezier(.22, .61, .36, 1) infinite;
}
@keyframes waPulse {
  0%   { box-shadow: 0 0 0 0 rgba(27, 76, 235, .5); }
  35%  { box-shadow: 0 0 0 12px rgba(27, 76, 235, .34); }
  72%  { box-shadow: 0 0 0 20px rgba(27, 76, 235, 0); }
  100% { box-shadow: 0 0 0 0 rgba(27, 76, 235, 0); }
}
.wa__act--go .ic { color: #fff; }
.wa__act--go i { color: rgba(255, 255, 255, .82); }

.wa__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; min-height: 0; }
.wa__mini { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wa__mini > div { background: #fff; border: 1px solid var(--rule); border-radius: 12px; padding: 7px 10px; }
.wa__mini span { display: block; font-size: 8.5px; color: var(--graphite); }
.wa__mini b { font-size: 12px; font-weight: 700; }

.wa__warn {
  display: flex; align-items: center; gap: 8px;
  background: #FFF7ED; border: 1px solid #FBD9A5; border-radius: 12px;
  padding: 9px 10px; margin-bottom: 12px;
}
.wa__warn .ic { font-size: 14px; color: #D98315; flex: none; }
.wa__warn b { display: block; font-size: 10px; font-weight: 600; color: #9A5B0C; }
.wa__warn i { font-style: normal; font-size: 8.5px; color: #B0762C; }

.wa__feed { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--rule); border-radius: 12px; }
.wa__feed li { display: flex; align-items: center; gap: 8px; padding: 7px 10px; }
.wa__feed li + li { border-top: 1px solid var(--rule); }
.wa__fi { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 6px; font-size: 11px; }
.wa__fi--in { background: rgba(15, 148, 100, .1); color: #0F9464; }
.wa__fi--out { background: rgba(217, 119, 6, .12); color: #B45309; }
.wa__fi--blue { background: #E6EDFF; color: var(--blue); }
.wa__fi--amber { background: #FCEFD8; color: #D98315; }
.wa__fi--violet { background: #EDE7FB; color: #6B4FD1; }
.wa__sellers { display: flex; flex-direction: column; gap: 6px; }
.wa__sellers--gap { gap: 8px; }
.wa__seller {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--rule); border-radius: 12px; padding: 6px 10px;
}
.wa__seller em { font-style: normal; flex: 1; min-width: 0; }
.wa__seller em b { display: block; font-size: 9.5px; font-weight: 600; }
.wa__seller em i { font-style: normal; font-size: 8px; color: var(--graphite); }
.wa__seller > b { font-size: 10px; font-weight: 600; }
.wa__feed em { font-style: normal; flex: 1; min-width: 0; }
.wa__feed em b { display: block; font-size: 9.5px; font-weight: 600; }
.wa__feed em i { font-style: normal; font-size: 8px; color: var(--graphite); }
.wa__feed > li > b { font-size: 10px; font-weight: 600; }

/* ── offline: the single loud surface ──────────────────────── */
.offline {
  background: linear-gradient(160deg, var(--blue-lift) 0%, var(--blue-deep) 100%);
  color: #fff;
}
.offline__in {
  padding-block: var(--band);
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(32px, 5vw, 76px); align-items: center;
}
/* widened from 17ch: the headline now carries its own <br> and 17ch forced a
   second, unwanted break inside each half */
.offline__h { color: #fff; max-width: 24ch; }
.offline__p { max-width: 56ch; margin: 0; color: color-mix(in srgb, #fff 82%, var(--blue-lift)); }

/* ── the offline band's device ──────────────────────────────────
   The app's OWN home screen, built from the same .pa__* components as
   the hero phone, then frozen and put in the offline state. Not a
   screenshot: a screenshot cannot show a state changing, and the state
   change — backlog draining, banner flipping to "merged" — is the whole
   point of the section. Its frame is deliberately NOT the hero's .phone
   class; duplicated here so edits to one device can never move the other. */
.offline__art { margin: 0; display: flex; justify-content: center; }

.off__phone {
  position: relative;
  width: 318px; max-width: 100%;
  padding: 11px; border-radius: 48px;
  background: linear-gradient(152deg, #FFFFFF 0%, #FAFBFD 42%, #EDF0F6 100%);
  box-shadow:
    0 2px 3px rgba(0, 10, 50, .14),
    0 16px 30px rgba(0, 10, 50, .22),
    0 52px 88px -26px rgba(0, 10, 50, .5),
    inset 0 2px 1px rgba(255, 255, 255, 1);
}
.off__btn {
  position: absolute; inset-inline-end: -2px;
  width: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #C9D0E0, #F6F8FB);
}
.off__btn--vol { top: 21%; height: 64px; }
.off__btn--pwr { top: 34%; height: 38px; }
.off__screen {
  width: 100%; aspect-ratio: 390 / 788;
  background: #F2F4F8; border-radius: 38px; overflow: hidden;
}

/* frozen: nothing in here is clickable, so nothing may look it. The explicit
   display:block is defensive — this screen is not routed, so it must not
   depend on an is-on class that only the hero phone's router maintains. */
.pa--still .pa__sell, .pa--still .pa__tab { cursor: default; }
.pa--still .pa__view { display: block; animation: none; padding-bottom: 6px; }
/* a touch tighter than the live phone so a full home screen — banner, total,
   sell, quick actions, dues and accounts — lands inside 681px with nothing
   clipped and no dead white at the bottom */
.pa--still .pa__net,
.pa--still .pa__sell,
.pa--still .pa__duo { margin-bottom: 9px; }
.pa--still .pa__card { margin-bottom: 0; }

/* the status bar carries the same story: crossed wifi while offline,
   signal bars once it has merged */
.off__statOff { display: grid; place-items: center; font-size: 13px; color: var(--ink); }
.off__statOn { display: none; }
.pa--still.is-synced .off__statOff { display: none; }
.pa--still.is-synced .off__statOn { display: inline-flex; }

/* The offline state, as a BLOCK. This screen is read at ~290px wide on a
   phone, where a one-line banner is about ten pixels tall and simply is not
   seen — the founder's note, and they were right. So the thing the section
   exists to say is now the biggest element on the screen: a 56px mark and
   26px type, with the app continuing underneath to keep it credible. */
/* Collapsible rows. 1fr -> 0fr on a grid is the one way to animate to and
   from auto height; the child needs min-height:0 + overflow:hidden or it
   refuses to shrink. The offline block collapses and the accounts card takes
   its place, so the sequence ENDS on an ordinary home screen — the outage
   leaves nothing behind, which is the actual claim. */
.off__wrap {
  display: grid;
  transition: grid-template-rows .65s cubic-bezier(.22,.61,.36,1),
              opacity .45s ease, margin-bottom .65s ease;
}
.off__wrap > * { overflow: hidden; min-height: 0; }
.off__wrap--state { grid-template-rows: 1fr; margin-bottom: 9px; }
.off__wrap--more { grid-template-rows: 0fr; opacity: 0; }
.pa--still.is-clear .off__wrap--state { grid-template-rows: 0fr; opacity: 0; margin-bottom: 0; }
.pa--still.is-clear .off__wrap--more { grid-template-rows: 1fr; opacity: 1; }

.off__state {
  text-align: center; border-radius: 20px;
  padding: 18px 16px 20px;
  background: #FCEFD8; color: #7A4E06;
  transition: background-color .55s ease, color .55s ease,
              padding .65s cubic-bezier(.22,.61,.36,1);
}
/* The padding has to collapse too. `overflow: hidden` clips CONTENT but a box
   keeps its own padding, so a 0fr row still measured 38px — exactly the 18+20
   here — and the block never fully disappeared. */
.pa--still.is-clear .off__state { padding-top: 0; padding-bottom: 0; }
.off__stateIc {
  width: 56px; height: 56px; margin: 0 auto 12px;
  border-radius: 50%; display: grid; place-items: center;
  font-size: 29px; background: #F4D49A; color: #8A5A08;
  transition: background-color .55s ease, color .55s ease;
}
.off__stateIc .ic { grid-area: 1 / 1; transition: opacity .45s ease, scale .45s ease; }
.off__icOn { opacity: 0; scale: .55; }

.off__stateTxt, .off__stateSub { display: grid; }
.off__stateTxt b, .off__stateSub i { grid-area: 1 / 1; transition: opacity .45s ease; }
.off__stateTxt b {
  font-size: 26px; font-weight: 700; line-height: 1.22; letter-spacing: -.015em;
}
.off__stateSub i {
  font-style: normal; font-size: 14.5px; line-height: 1.4;
  margin-top: 6px;
}
/* The opacity lives on the state classes, NOT on `.off__stateSub i` — an
   element+class selector outranks a bare class, so an `opacity: .92` there
   beat `.off__sOn { opacity: 0 }` and painted both sublines on top of each
   other. Same trap as `.wa__mini--3` earlier in this build. */
.off__sOff { opacity: .92; }
.off__tOn, .off__sOn { opacity: 0; }

.pa--still.is-synced .off__state { background: #DAF2E6; color: #0B6B42; }
.pa--still.is-synced .off__stateIc { background: #A9E4C7; color: #0B6B42; }
.pa--still.is-synced .off__icOff { opacity: 0; scale: .55; }
.pa--still.is-synced .off__icOn { opacity: 1; scale: 1; }
.pa--still.is-synced .off__tOff, .pa--still.is-synced .off__sOff { opacity: 0; }
.pa--still.is-synced .off__tOn { opacity: 1; }
.pa--still.is-synced .off__sOn { opacity: .92; }

/* the net card's subline carries the promise, in green */
.pa--still .pa__netSub .ic { color: #0E8A55; }
.pa--still .pa__netSub i { color: #0B6B42; font-weight: 600; }

@media (max-width: 900px) {
  .offline__in { grid-template-columns: 1fr; }
  .offline__art { margin-top: clamp(30px, 5vw, 48px); }
}
@media (max-width: 560px) {
  .off__phone { width: 290px; }
}

/* ── work ledger ───────────────────────────────────────────── */
/* ── what Gonok does, in twelve blocks ───────────────────────────
   Was a flat 18-row list: two columns of name + tiny note, hairline
   between each. It read as a wall — nothing told you where to start and
   nothing said which capabilities belong together. Grouped into cards,
   one icon per GROUP rather than per line, so the eye lands on twelve
   things instead of eighteen. */
.work { padding-block: var(--band); }
.work .h2 { max-width: 26ch; margin-inline: auto; text-align: center; text-wrap: balance; }

.work__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.5vw, 20px);
  margin-top: clamp(34px, 4vw, 54px);
}
/* The whole card is the link, 2026-09-20 — founder's call. It used to carry an
   "About X →" row at the bottom and the card itself did nothing, so the only tap
   target was one line of text at the very end of a list. The card keeps the
   descriptive internal link Google reads; the anchor text is now the heading
   plus the bullets rather than that one row. */
.work__card {
  display: block; color: inherit; text-decoration: none;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: clamp(18px, 1.7vw, 24px);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
@media (hover: hover) {
  .work__card:hover { border-color: var(--w-ink); box-shadow: 0 6px 22px rgba(16, 19, 26, .07); }
}
.work__card:active { transform: scale(.995); }
.work__ic {
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 13px; font-size: 22px; margin-bottom: 15px;
  background: var(--w-well); color: var(--w-ink);
}
.work__card h3 {
  font-family: var(--display);
  font-size: 1.08rem; font-weight: 700; line-height: 1.3;
  margin: 0 0 .75rem; letter-spacing: -.01em;
}
.work__card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .48rem; }
.work__card li {
  position: relative; padding-inline-start: 1.05em;
  font-size: .95rem; line-height: 1.5;
  /* 500, not the body's 400: Hind Siliguri sets Bangla noticeably lighter than
     Anek Latin sets English at the same weight, and at this size in grey it
     read as thin. The colour is a step darker than --graphite for the same
     reason — these lines are the content of the section, not captions. */
  font-weight: 500; color: #464C59;
}
.work__card li::before {
  content: ''; position: absolute; inset-inline-start: 0; top: .6em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--w-ink);
}

/* one tint per group — the same palette the app uses for its own tiles */
.work__card            { --w-well: #E6EDFF; --w-ink: var(--blue); }
.work__card--due,
.work__card--offer     { --w-well: #FCEFD8; --w-ink: #B4700F; }
.work__card--buy,
.work__card--doc       { --w-well: #EAE6FB; --w-ink: #6543C4; }
.work__card--stock,
.work__card--fix       { --w-well: #DFF3E9; --w-ink: #0B7A52; }
.work__card--label,
.work__card--safe      { --w-well: #E8EBF2; --w-ink: #4A5265; }
.work__card--staff     { --w-well: #FBE7E7; --w-ink: #C13B3B; }

/* ── what comes with it ─────────────────────────────────────────
   Its own block under the twelve, with its own heading: these are
   commitments, not capabilities, and three of them stand better as three
   cards than as one wide strip. */
.promise { margin-top: clamp(56px, 7vw, 96px); }
/* ── setup and training ──────────────────────────────────────────
   ONE filled panel, not four cards. Four white cards on a white page read
   as four separate things; this is a single offer, so it gets a single
   surface and the three commitments live INSIDE it.

   Deep brand blue, NOT the CTA blue. The two CTA panels on this page use
   the bright brand gradient — if this used the same one it would read as a
   third call to action instead of the offer it is. Going deeper keeps the
   brand and separates the object.

   Nothing in here is boxed. Rounded translucent pills on a gradient are the
   house style of every AI-generated landing page; the content is held by
   type, spacing and solid white icon marks instead. */
.care {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: clamp(22px, 2.2vw, 32px);
  padding: clamp(30px, 3.6vw, 58px);
  color: #fff;
  background:
    /* a faint weave so the fill is a material, not a flat wash */
    repeating-linear-gradient(115deg,
      rgba(255, 255, 255, .038) 0 1px, rgba(255, 255, 255, 0) 1px 10px),
    linear-gradient(150deg, #2A5CF8 0%, #1B4CEB 32%, #0B2FA8 72%, #071E70 100%);
  box-shadow: 0 30px 62px -34px rgba(7, 30, 112, .8);
}
.care::before, .care::after {
  content: ''; position: absolute; z-index: -1; border-radius: 50%;
  pointer-events: none;
}
.care::before {
  inset-inline-end: -12%; top: -50%; width: 56%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255,255,255,.2) 0%, rgba(255,255,255,0) 66%);
}
.care::after {
  inset-inline-start: -16%; bottom: -64%; width: 50%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 68%);
}

.care__top {
  display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  gap: clamp(26px, 3.2vw, 58px); align-items: center;
}
.care__badge {
  display: inline-flex; align-items: center;
  background: #fff; color: var(--blue-deep);
  border-radius: 999px; padding: .44em 1.05em;
  font-size: .8rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
.care__h {
  font-family: var(--display);
  font-size: clamp(1.95rem, 3.5vw, 3.05rem);
  font-weight: 700; line-height: 1.14; letter-spacing: -.026em;
  margin: clamp(15px, 1.6vw, 22px) 0 0; color: #fff; text-wrap: balance;
}

/* Boxed again, founder's call — but on a TIGHT gap. The complaint was never
   the boxes, it was the air between them: at a wide gap three pills float as
   three objects, at this one they read as one stack. */
.care__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.care__list li {
  display: flex; align-items: center; gap: .85rem;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 14px;
  padding: clamp(13px, 1.3vw, 17px) clamp(15px, 1.4vw, 19px);
  font-size: clamp(1rem, .4vw + .92rem, 1.14rem);
  font-weight: 600; line-height: 1.34;
}
.care__tick {
  width: 27px; height: 27px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: #fff; color: var(--blue-deep); font-size: 15px;
}

/* the three commitments — boxed, but still no rule above them: the gap to
   the lead does that job */
.care__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.3vw, 18px);
  margin-top: clamp(30px, 3.6vw, 52px);
}
.care__tile {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 18px;
  padding: clamp(18px, 1.9vw, 26px);
}
.care__ic {
  width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 14px; font-size: 22px;
  background: #fff; color: var(--blue-deep);
  margin-bottom: clamp(13px, 1.3vw, 17px);
}
.care__tile b {
  display: block; font-family: var(--display);
  font-size: clamp(1.02rem, .4vw + .94rem, 1.16rem);
  font-weight: 700; line-height: 1.3; letter-spacing: -.01em;
  text-wrap: balance;
}
.care__tile i {
  font-style: normal; display: block; margin-top: .3rem;
  font-size: .95rem; font-weight: 500; line-height: 1.45;
  color: rgba(255, 255, 255, .78);
}

@media (max-width: 900px) {
  .care__top { grid-template-columns: 1fr; align-items: start; }
  .care__grid { grid-template-columns: 1fr; }
}

/* The capability cards: three columns is a desktop shape. A stray `}` used to
   sit here and it was not harmless — a top-level `}` makes the parser read
   what follows as a bogus qualified rule and swallow the NEXT block whole, so
   the one media query below was silently discarded and these cards stayed in
   three columns on a 390px phone. That put each Bangla heading on two lines
   and broke every bullet across four. Two steps now, and both are needed:
   three columns do not fit a tablet either. */
@media (max-width: 900px) {
  .work__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .work__grid { grid-template-columns: 1fr; }
}

/* ── call to action ─────────────────────────────────────────────
   Rounded blue panels rather than full-bleed bands. The offline section is
   this page's ONE edge-to-edge loud surface and it stays that way — two more
   full-width blue bands would have spent that card three times over. Inset
   and rounded, they read as a prompt rather than another argument. */

/* ── devices ───────────────────────────────────────────────── */


/* ── the two apps ────────────────────────────────────────────────
   INK, not blue. A deep-blue setup panel sits above this and a blue CTA
   below; a third blue surface would have made the bottom of the page one
   long run — and on charcoal the two platform marks keep their own brand
   colours instead of fighting a blue field.

   The panel is ONE object split in two with an equals sign welded across
   the seam, because the claim in the headline is a claim about equality
   and a shopkeeper's default assumption is the opposite: that the phone
   build is a viewer. Two lists side by side would only imply it. */
/* the demo section above ends at its own edge, so this one owns the whole gap */
.apps { padding-block: var(--band); }
.apps__h {
  max-width: 30ch; margin: 0 auto;   /* the title runs long; 22ch broke it badly */
  text-align: center; text-wrap: balance;
}
.apps__sub {
  /* no measure cap — founder wants this on ONE line, so the wrap's own width
     is the only limit. It still wraps naturally on narrow screens, where one
     line is impossible; `pretty` keeps that break from stranding a word. */
  margin: clamp(14px, 1.5vw, 18px) auto 0;
  text-align: center; text-wrap: pretty;
  /* darker than --graphite: this line carries the argument, it is not a caption */
  color: #333A47;
  font-size: clamp(1rem, .45vw + .92rem, 1.12rem);
}

.apps__panel {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: clamp(30px, 3.6vw, 52px);
  border-radius: clamp(22px, 2.2vw, 32px);
  display: grid; grid-template-columns: 1fr 1px 1fr;
  color: #fff;
  background:
    repeating-linear-gradient(115deg,
      rgba(255, 255, 255, .03) 0 1px, rgba(255, 255, 255, 0) 1px 10px),
    linear-gradient(150deg, #212739 0%, #151A27 44%, #0A0C13 100%);
  box-shadow: 0 30px 62px -34px rgba(10, 12, 19, .85);
}
/* the seam, and one light so the fill is a material not a slab */
.apps__panel::before {
  content: ''; grid-column: 2; grid-row: 1;
  background: linear-gradient(180deg,
    rgba(255,255,255,0) 0%, rgba(255,255,255,.16) 22%,
    rgba(255,255,255,.16) 78%, rgba(255,255,255,0) 100%);
}
.apps__panel::after {
  content: ''; position: absolute; z-index: -1; border-radius: 50%;
  inset-inline-end: -14%; top: -54%; width: 54%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(120,170,255,.18) 0%, rgba(120,170,255,0) 66%);
  pointer-events: none;
}

.apps__half { padding: clamp(28px, 3.2vw, 50px); }
.apps__half:first-of-type { grid-column: 1; }
.apps__half:last-of-type  { grid-column: 3; }

/* a real app-icon well, so each mark reads as the platform it is */
.apps__logo {
  width: 58px; height: 58px; display: grid; place-items: center;
  border-radius: 16px; background: #fff;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .55);
  margin-bottom: clamp(16px, 1.7vw, 22px);
}
.apps__logo svg { width: 32px; height: 32px; display: block; }

.apps__half h3 {
  font-family: var(--display);
  font-size: clamp(1.28rem, .8vw + 1.06rem, 1.7rem);
  font-weight: 700; line-height: 1.22; letter-spacing: -.018em;
  margin: 0;
}
.apps__meta {
  display: block; margin-top: .3rem;
  font-size: .9rem; font-weight: 500; letter-spacing: .04em;
  color: rgba(255, 255, 255, .55); text-transform: uppercase;
}
.apps__half ul {
  list-style: none; margin: clamp(18px, 2vw, 26px) 0 0; padding: 0;
  display: grid; gap: 0;
}
.apps__half li {
  padding: clamp(11px, 1.1vw, 14px) 0;
  font-size: clamp(.97rem, .3vw + .9rem, 1.06rem);
  font-weight: 500; line-height: 1.45; color: rgba(255, 255, 255, .84);
}
.apps__half li + li { border-top: 1px solid rgba(255, 255, 255, .11); }

/* the equals sign, welded across the seam — the section's whole argument */
.apps__eq {
  position: absolute; z-index: 2; top: 50%; left: 50%;
  translate: -50% -50%;
  width: 54px; height: 54px; display: grid; place-items: center;
  border-radius: 50%; font-size: 26px;
  background: #fff; color: #0A0C13;
  box-shadow: 0 0 0 7px rgba(10, 12, 19, .92), 0 10px 26px -8px rgba(0, 0, 0, .6);
}

@media (max-width: 820px) {
  .apps__panel { grid-template-columns: 1fr; }
  .apps__panel::before { grid-column: 1; grid-row: 2; height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.16) 22%,
      rgba(255,255,255,.16) 78%, rgba(255,255,255,0)); }
  .apps__half:first-of-type { grid-column: 1; grid-row: 1; padding-bottom: clamp(30px, 5vw, 40px); }
  .apps__half:last-of-type  { grid-column: 1; grid-row: 3; padding-top: clamp(30px, 5vw, 40px); }
}

/* ── demo ──────────────────────────────────────────────────── */
/* ── book a demo ─────────────────────────────────────────────────
   Two columns, and deliberately NO panel. Setup, apps and the CTA are each
   a filled box by now; a fourth would have made the page wall-to-wall
   containers, which is exactly what it started to feel like. This section
   carries itself on type, spacing and the fields — the only boxes here are
   the inputs, which have to be boxes. */
/* A tinted full-bleed BAND, and nothing else. The page already carries a
   filled panel for setup, one for the apps and one for the CTA; a card here
   was a fourth container and the founder was right that it had tipped over.
   A band is a different device from a box — it separates the section without
   adding another edge — and the white form fields sitting on the tint get
   their own contrast for free. */
.demo { padding-block: var(--band); background: #F1F4FD; }
.demo__box {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  /* centred, not start-aligned: the form is much the taller column and
     start-aligning left a block of dead space under the phone number */
  gap: clamp(34px, 4.4vw, 72px); align-items: center;
}
/* a hairline between the two columns — a rule, not another container */
.demo .form {
  align-self: stretch;
  padding-inline-start: clamp(34px, 4.4vw, 72px);
  border-inline-start: 1px solid var(--rule);
  margin-inline-start: calc(-1 * clamp(34px, 4.4vw, 72px) / 2);
}

/* Bigger than an h2 — with the description cut to one line and the three
   reassurances gone (they repeat the setup section above it verbatim), the
   heading is what holds this column. */
.demo__h {
  font-family: var(--display);
  font-size: clamp(1.9rem, 3.2vw, 3rem);
  font-weight: 700; line-height: 1.14; letter-spacing: -.026em;
  margin: 0; text-wrap: balance;
}
.demo__p {
  margin: clamp(14px, 1.4vw, 18px) 0 0; max-width: 30ch;
  font-size: clamp(1.02rem, .45vw + .94rem, 1.18rem); line-height: 1.55;
  color: #3D4452;
}

/* A ruled list, not tick-circles — the same device the apps panel uses, so
   the two read as one page rather than two component libraries. The rules
   carry the structure; the tick only has to say "included". */
.demo__pts {
  list-style: none; margin: clamp(26px, 3vw, 38px) 0 0; padding: 0;
  max-width: 30ch;
}
.demo__pts li {
  display: flex; align-items: center; gap: .7rem;
  padding: clamp(11px, 1.1vw, 14px) 0;
  font-size: clamp(.97rem, .3vw + .9rem, 1.05rem);
  font-weight: 600; color: var(--ink);
}
.demo__pts li + li { border-top: 1px solid #DDE3F3; }
.demo__pts .ic { font-size: 1.12em; color: var(--blue); flex: none; }

/* the number, set as type. No icon well, no border — another bordered widget
   is the last thing this page needs. */
.demo__call {
  /* no rule above it — an inline-block border stopped mid-column and read as
     an accident. Space separates it instead. */
  display: inline-block; text-decoration: none; color: var(--ink);
  margin-top: clamp(30px, 3.4vw, 46px);
}
.demo__call i {
  font-style: normal; display: block;
  font-size: .82rem; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--graphite);
}
.demo__call b {
  display: block; margin-top: .3rem;
  font-family: var(--display);
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  font-weight: 700; letter-spacing: -.01em;
  transition: color .15s ease;
}
.demo__call:hover b { color: var(--blue); }

/* the form — no container, just well-set fields */
.form { display: grid; gap: clamp(13px, 1.3vw, 17px); align-content: start; }
.form label { display: grid; gap: .4rem; font-size: .92rem; font-weight: 600; color: #3D4452; }
.form label i { font-style: normal; font-weight: 500; color: var(--graphite); }
.form input, .form select {
  font: inherit; font-size: 1rem; color: var(--ink);
  height: 52px; padding: 0 15px;
  background: var(--card);
  border: 1px solid var(--rule); border-radius: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form input::placeholder { color: #9AA1AF; }
.form input:focus, .form select:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3.5px rgba(27, 76, 235, .14);
}

/* when to call — pills, not a dropdown: four visible choices beat a menu
   you have to open, especially with a thumb */
.form__when { border: 0; margin: 0; padding: 0; }
.form__when legend { padding: 0 0 .4rem; font-size: .92rem; font-weight: 600; color: #3D4452; }
.form__pills { display: flex; flex-wrap: wrap; gap: .45rem; }
.form__pills label { display: block; cursor: pointer; font-size: .93rem; font-weight: 600; }
.form__pills input { position: absolute; opacity: 0; pointer-events: none; }
.form__pills span {
  display: block; padding: .6em 1em; border-radius: 999px;
  border: 1px solid var(--rule); background: var(--card); color: #3D4452;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}
.form__pills label:hover span { border-color: var(--blue); color: var(--blue); }
.form__pills input:checked + span { background: var(--blue); border-color: var(--blue); color: #fff; }
.form__pills input:focus-visible + span { box-shadow: 0 0 0 3.5px rgba(27, 76, 235, .2); }

/* honeypot — `.form .hp`, not `.hp`: `.form input` is element+class and
   outranks a bare class, so a plain `.hp { height: 1px }` lost to the 52px
   field height and the honeypot rendered as a real, visible input. */
.form .hp {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.form .btn { margin-top: .4rem; }
.form__note { margin: .1rem 0 0; font-size: .9rem; min-height: 1.3em; color: var(--graphite); }
.form__note[data-bad='1'] { color: #B3261E; }

@media (max-width: 900px) {
  .demo__box { grid-template-columns: 1fr; }
  .demo .form {
    padding-inline-start: 0; margin-inline-start: 0;
    border-inline-start: 0;
    padding-top: clamp(28px, 5vw, 40px);
    border-top: 1px solid var(--rule);
  }
}

/* ── faq ───────────────────────────────────────────────────── */
.faq { padding-block: var(--band); }
/* Full container width. This list was capped at 760px inside a 1160px wrap,
   which left a dead third of the row empty to the right of every question and
   was the reason the section read as "off". The ANSWER still gets a reading
   measure (.faq p, 62ch) — a full-bleed row is right for the question and its
   chevron, wrong for a paragraph. */
.faq__list { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 1.15rem 2.5rem 1.15rem 0; position: relative;
  font-weight: 600;
  font-size: clamp(1rem, 1.35vw, 1.1rem);
  /* the whole row is the target now that it is this wide, not just the words */
  display: block;
  transition: color .15s ease;
}
.faq summary:hover { color: var(--blue); }
.faq details[open] summary { color: var(--blue); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; inset-inline-end: 4px; top: 50%;
  width: 11px; height: 11px; margin-top: -6px;
  border-inline-end: 1.5px solid var(--graphite); border-bottom: 1.5px solid var(--graphite);
  transform: rotate(45deg); transition: transform .18s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq p { margin: 0 0 1.2rem; color: var(--graphite); max-width: 62ch; }

/* ── footer ──────────────────────────────────────────────────
   The closing panel and the footer are one surface. INK, not brand blue:
   the offline band is already a full-bleed blue, so a second one here would
   repeat instead of conclude. `overflow: hidden` is what lets the giant
   logotype bleed to the container edges without widening the page. */
.foot {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #131722 0%, #0B0E14 100%);
  color: #fff;
  margin-top: clamp(56px, 7vw, 104px);
}
.foot__in {
  position: relative; z-index: 1;
  padding-block: clamp(40px, 5vw, 72px) clamp(150px, 19vw, 260px);
}

/* the CTA, now the footer's opening line rather than its own card */
.foot__cta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(20px, 3vw, 48px);
  padding-bottom: clamp(32px, 4vw, 52px);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.foot__cta > div:first-child { flex: 1 1 24ch; min-width: 0; }
.foot__h {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.2vw, 2.2rem);
  font-weight: 700; line-height: 1.24; letter-spacing: -.018em;
  margin: 0; text-wrap: balance;
}
.foot__p {
  margin: .5rem 0 0; font-size: clamp(1rem, .5vw + .88rem, 1.1rem);
  color: rgba(255, 255, 255, .72);
}
.foot__acts { display: flex; flex-wrap: wrap; gap: .7rem; }

/* info row */
.foot__rows {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(24px, 3vw, 48px);
  padding-block: clamp(28px, 3.4vw, 44px);
}
.foot__brand .wordmark { height: 22px; color: #fff; }
.foot__tag {
  font-family: var(--display); font-size: 1.15rem; margin: .9rem 0 0;
  color: rgba(255, 255, 255, .62); max-width: 34ch;   /* was capped narrower than the column and wrapped the English line */
}
.foot__links { display: flex; flex-direction: column; gap: .7rem; align-items: flex-start; }
.foot__links a {
  color: rgba(255, 255, 255, .74); text-decoration: none; font-size: .96rem;
  border-bottom: 1px solid transparent; transition: color .15s ease, border-color .15s ease;
}
.foot__links a:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, .45); }

/* Sits under the logotype and the tagline now (2026-09-20, founder's call).
   The phone number, WhatsApp link, email and address that used to stand beside
   them are gone — the same number is a tap away in the nav and in the two CTAs
   directly above this row, so the footer was repeating itself four times. */
.foot__social { display: flex; gap: .55rem; margin-top: 4.2rem; }
.foot__social a {
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 11px; font-size: 19px;
  color: rgba(255, 255, 255, .72);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .13);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.foot__social a:hover { background: #fff; color: #10131A; border-color: #fff; }

.foot__cR { display: inline-flex; flex-wrap: wrap; gap: .4rem 1.4rem; align-items: baseline; }
.foot__cR a { color: rgba(255, 255, 255, .62); text-decoration: none; }
.foot__cR a:hover { color: #fff; text-decoration: underline; }

.foot__c {
  margin: 0; font-size: .88rem; color: rgba(255, 255, 255, .45);
  /* two ends of one line: the mark left, the rights notice right */
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: .4rem 1.5rem;
}

/* The payoff. Container-width logotype pinned to the bottom, very low alpha,
   and MASKED so it dissolves before the edge rather than being sliced off by
   overflow — a hard cut reads as a mistake, a fade reads as intent.
   pointer-events:none so this texture can never swallow a click on the links
   sitting above it. */
.foot__giant {
  position: absolute; z-index: 0;
  inset-inline: var(--gut); bottom: clamp(-26px, -2vw, -10px);
  pointer-events: none; user-select: none;
  color: rgba(255, 255, 255, .06);
  -webkit-mask-image: linear-gradient(to bottom, #000 8%, rgba(0,0,0,.55) 55%, transparent 93%);
          mask-image: linear-gradient(to bottom, #000 8%, rgba(0,0,0,.55) 55%, transparent 93%);
}
.foot__giant .wordmark { width: 100%; height: auto; display: block; }

@media (max-width: 760px) {
  .foot__rows { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .foot__acts { width: 100%; }
  .foot__acts .btn { flex: 1 1 100%; justify-content: center; }
}

/* The two hero CTAs on one line. They need 376px side by side and a 390px
   phone only offers 350 inside the gutters, so .acts' flex-wrap dropped the
   WhatsApp button onto its own row. Below 430px they become two equal
   columns instead: `white-space: normal` is the part that makes it work —
   .btn is nowrap by default, so the longer Bangla label would otherwise
   force its column wider than half the row and wrap again. Equal columns
   also stop the two buttons reading as primary/secondary by size alone.
   NOTE placement: this MUST sit after the base `.acts` rule. It first went
   in beside the file's EARLY max-width:400px block and silently lost —
   media queries add no specificity, so the later base rule won and `display`
   stayed flex while only the ignored grid-template-columns applied. */
@media (max-width: 430px) {
  .acts { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
  .acts .btn {
    width: 100%;
    padding-inline: .6em;
    font-size: .86rem;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
  }
}

/* ── whatsapp fab (mobile only) ────────────────────────────── */
.wa-fab {
  position: fixed; inset-inline-end: 16px; bottom: 16px; z-index: 45;
  width: 52px; height: 52px; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  background: var(--wa); color: #fff;
  box-shadow: 0 6px 20px rgba(18, 140, 126, .32);
}

/* ── responsive ────────────────────────────────────────────── */
@media (max-width: 960px) {
  .hero__in { grid-template-columns: 1fr; }
  .offline__in { grid-template-columns: 1fr; }
  .stage { min-height: 0; justify-content: center; padding-top: 8px; }

  /* Stacked, the hero reads title → phone → copy → buttons: the headline
     makes the claim, the phone is the proof, and the supporting copy and CTA
     follow once the visitor is interested. `display: contents` is what makes
     this possible — `order` only applies to direct grid children, and h1 /
     lede / acts are nested inside .hero__say, so the wrapper has to stop
     generating a box before they can be ordered against .stage.
     Caveat worth knowing: this changes VISUAL order only. The DOM still runs
     h1 → lede → acts → phone, so a screen reader and the tab key still reach
     the copy and buttons before the phone. That ordering is the sensible one
     anyway, which is why the mismatch is acceptable here. */
  .hero__say { display: contents; }
  .hero__say .h1 { order: 1; }
  .stage       { order: 2; }
  .hero__say .lede { order: 3; }
  .hero__say .acts { order: 4; }
  /* Once the wrapper stops generating a box, the grid's row-gap applies
     between all four items and the h1/lede bottom margins stack ON TOP of it
     — the rhythm came out 55 / 32 / 64 instead of even. Drop those margins
     here and let row-gap be the only thing setting the spacing. */
  .hero__say .h1, .hero__say .lede { margin-bottom: 0; }
  /* Stacked, the headline owns the full column instead of half of it, so the
     phone-sized floor it inherits reads small. Only the FLOOR moves: 5.4vw
     doesn't overtake 2.6rem until ~933px, so this floor is what every phone
     and tablet actually renders, and at 960 itself the new value (50.4px)
     lands within 1.5px of the desktop formula — the bump is invisible at the
     breakpoint and fully felt on a phone. */
  .hero__say .h1 { font-size: clamp(3.15rem, 5.4vw, 4.5rem); }
  /* English is deliberately NOT bumped. Measured at 390px: the authored break
     holds to 38.4px and turns into a ragged THIRD line at 41px, because
     "business at your side." is a long line the Bangla equivalent is not. The
     two-line shape is worth more than the extra 7px. */
  :root[lang='en'] .hero__say .h1 { font-size: clamp(2.4rem, 4.6vw, 3.9rem); }
  /* Stacked, the hero is a centred column: the headline, the supporting line
     and the buttons all sit over the phone, which is itself centred. Left
     alignment only reads as intentional when something shares that edge, and
     at this width nothing does. The ch caps stay, so the centring needs the
     auto inline margins to actually take effect. */
  .hero__say .h1, .hero__say .lede { text-align: center; margin-inline: auto; }
  .hero__say .acts { justify-content: center; }
  .demo__in { grid-template-columns: 1fr; }
}

/* The section links go first, at 900 — not at 700 where they used to. With
   sign-in now a button the right-hand group is ~90px wider, and MEASURED at
   701px the "book a demo" CTA hung 45px past the viewport in Bangla and 73px
   in English, taking the whole page into horizontal scroll. Between 700 and
   900 the nav therefore carries language + sign-in + CTA and no links; the
   page is one scroll, so nothing becomes unreachable. */
@media (max-width: 900px) {
  .nav__links { display: none; }
}

@media (max-width: 700px) {
  .signin { display: none; }
  .nav__demo { display: none; }
  .nav__call { display: inline-flex; }
  /* Flush to the gutter: with the links gone, these two are the only things
     on the right, so they hang off the row's end rather than floating with a
     leftover inline margin. */
  .nav__end { margin-inline-start: auto; margin-inline-end: 0; }
  /* Hind Siliguri is wider than the face this was sized against */
  .nav__end .btn--sm { padding: .5em .8em; font-size: .86rem; }
  .nav__end { margin-inline-start: auto; }
  .wa-fab { display: flex; }
  .foot__in { flex-direction: column; }
  /* The HUD overhangs the phone's left edge. On a wide screen it lands on
     the search field, which reads as a deliberate layer; at phone widths the
     device shrinks under it and it started covering a product NAME mid-word,
     which reads as an accident. Push it further outboard and up so it clears
     the cart rows. */
  .off__hud { inset-inline-start: -10px; top: 20%; }
}

/* 320px is a real phone width; the nav's three fixed items just fit */
@media (max-width: 400px) {
  .brand .wordmark { height: 16px; }
  /* `auto`, NOT .5rem — see the note on the earlier copy of this block.
     A fixed start margin here cancels the auto that pushes this group to the
     row's right edge, so the switcher and CTA floated 64px short of the
     gutter on every phone <=400px while looking right at 401px. */
  .nav__end { gap: .45rem; margin-inline-start: auto; }
  .nav__end .btn--sm { padding: .45em .7em; font-size: .8rem; }
  .lang { font-size: .78rem; }
  .lang span { padding: .45em .5em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ── the newer sidebar pages ─────────────────────────────────── */
.wa__mini-btn {
  font: inherit; font-size: 8.5px; font-weight: 600; cursor: pointer;
  background: #fff; border: 1px solid var(--rule); border-radius: 999px;
  padding: 4px 10px; color: var(--blue); flex: none;
}
.wa--live .wa__mini-btn:hover { background: var(--blue); border-color: var(--blue); color: #fff; }

.wa__sfind--solo input {
  flex: 1; min-width: 0; font: inherit; font-size: 10px; color: var(--ink);
  border: 0; background: none; outline: none; padding: 0;
}
.wa__sfind--solo input::placeholder { color: var(--graphite); }

.wa__allgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.wa__tile2 {
  font: inherit; font-size: 9.5px; font-weight: 500; text-align: start; cursor: pointer;
  background: #fff; border: 1px solid var(--rule); border-radius: 10px; padding: 9px 10px;
  color: var(--ink);
}
.wa--live .wa__tile2:hover { border-color: var(--blue); color: var(--blue); }

.wa__card--wide { display: flex; flex-direction: column; gap: 2px; }
.wa__setrow {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 2px; font-size: 10.5px;
}
.wa__setrow + .wa__setrow { border-top: 1px solid var(--rule); }
.wa__toggle {
  width: 34px; height: 19px; border-radius: 999px; flex: none;
  border: 1px solid var(--rule); background: #E4E7EF; position: relative; cursor: pointer;
}
.wa__toggle i {
  position: absolute; top: 1.5px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(16,19,26,.25); transition: translate .16s ease;
}
.wa__toggle.is-on { background: var(--blue); border-color: var(--blue); }
.wa__toggle.is-on i { translate: 15px 0; }


/* ── document pages (privacy, topic pages) ───────────────────────────────
   Lifted out of privacy.html 2026-09-19 so the topic pages share one copy
   instead of each carrying its own. The mask trick on the wordmark is
   load-bearing: the asset paints WHITE, which is invisible on these pages'
   light header, so it is masked and takes the ink colour instead. */
  .doc__mark {
    display: block; width: 106px; height: 19px; background: var(--ink);
    -webkit-mask: url(assets/gonok-wordmark.svg) no-repeat center / contain;
            mask: url(assets/gonok-wordmark.svg) no-repeat center / contain;
  }
  .doc { max-width: 74ch; margin-inline: auto; padding-block: clamp(40px, 6vw, 80px); }
  .doc__back { display: inline-block; margin-bottom: clamp(26px, 3vw, 40px); color: var(--blue); text-decoration: none; font-weight: 600; }
  .doc__back:hover { text-decoration: underline; }
  .doc h1 { font-family: var(--display); font-size: clamp(1.9rem, 3.4vw, 2.9rem); font-weight: 700; line-height: 1.16; letter-spacing: -.024em; margin: 0; }
  .doc__meta { color: var(--graphite); margin: .7rem 0 0; font-size: .95rem; }
  .doc h2 { font-family: var(--display); font-size: clamp(1.25rem, 1.6vw, 1.5rem); font-weight: 700; line-height: 1.3; letter-spacing: -.012em; margin: clamp(34px, 3.6vw, 52px) 0 .7rem; }
  .doc p, .doc li { color: #333A47; line-height: 1.68; }
  .doc p { margin: 0 0 .85rem; }
  .doc ul { margin: 0 0 .85rem; padding-inline-start: 1.15rem; }
  .doc li { margin-bottom: .4rem; }
  .doc strong { font-weight: 600; color: var(--ink); }
  /* NOT `.doc a` — that is 0,1,1 and beat `.btn--solid`'s 0,1,0, which painted
   the primary CTA blue-on-blue: an invisible label on the main conversion
   button of every topic page. Excluding .btn keeps document links blue and
   leaves buttons to the button rules. */
.doc a:not(.btn) { color: var(--blue); }
  .doc__rule { height: 1px; background: var(--rule); border: 0; margin: clamp(46px, 5vw, 76px) 0 0; }
  .doc__lang { display: inline-block; margin-top: clamp(30px, 3.4vw, 46px); font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--graphite); }
  .doc__foot { border-top: 1px solid var(--rule); padding-block: 26px; text-align: center; color: var(--graphite); font-size: .9rem; }
  .doc__foot a { color: var(--graphite); }

/* topic pages only */
.doc__cta {
  display: flex; flex-wrap: wrap; gap: .7rem; align-items: center;
  margin-top: clamp(34px, 3.6vw, 52px);
}
.doc__faq { margin-top: clamp(34px, 3.6vw, 52px); }
.doc__faq dt { font-weight: 700; color: var(--ink); margin-top: 1.1rem; }
.doc__faq dd { margin: .35rem 0 0; color: #333A47; line-height: 1.68; }
.doc__more { margin-top: clamp(40px, 4vw, 64px); padding-top: 1.4rem; border-top: 1px solid var(--rule); }
.doc__more a { display: inline-block; margin-inline-end: 1.2rem; }

/* ── comparison table ─────────────────────────────────────────────────────
   Scrolls inside its own box on a phone rather than pushing the page sideways.
   The "we do / they do" columns are deliberately the same weight: a comparison
   that visually shouts for one side reads as an advert, and the reader stops
   believing the rows that actually matter. */
.cmp { overflow-x: auto; margin-top: 1.1rem; -webkit-overflow-scrolling: touch; }
.cmp table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: .95rem; }
.cmp th, .cmp td { text-align: start; padding: 11px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.cmp thead th { font-family: var(--display); font-weight: 700; color: var(--ink); border-bottom-width: 2px; }
.cmp tbody th { font-weight: 600; color: var(--ink); }
.cmp td { color: #333A47; }
.cmp .yes { color: #0B7A52; font-weight: 600; }
.cmp .no  { color: var(--graphite); }
.cmp caption { caption-side: bottom; text-align: start; color: var(--graphite); font-size: .85rem; padding-top: .8rem; line-height: 1.5; }