/*
  The marketing site's whole stylesheet.

  Hand-written rather than generated, and that is the point: there is no build
  step, so the file nginx serves is the file in this repo. A typo is fixed by
  copying one file up, not by running a toolchain on a server with little RAM
  to spare.

  Colours are the app's own tokens, converted to hex. The app writes them in
  `oklch`, which Chrome only understood from version 111 — and the audience is
  a shopkeeper on a cheap Android whose WebView may be years behind. A colour
  the browser cannot parse is a colour that falls back to black on white, so
  hex it is. The values came out of the running app rather than being matched
  by eye; see `src/app/globals.css`.
*/

:root {
  --brand-50: #e9fbf2;
  --brand-100: #d2f7e5;
  --brand-600: #1c8c63;
  --brand-700: #0c7a55;
  --brand-800: #03583f;
  --ink-50: #fafaf9;
  --ink-100: #f3f2f0;
  --ink-200: #e7e6e3;
  --ink-300: #d2d1cd;
  --ink-500: #76746f;
  --ink-600: #575550;
  --ink-700: #41403b;
  --ink-900: #13110f;
  --baki: #8a5a00;
  --page: 68rem;
}

/*
  The same subsetted faces the app already ships, so a shopkeeper who came from
  a link has them cached before they ever reach the app.

  `font-display: swap` on purpose: text in a fallback face immediately beats no
  text at all on a slow connection, which is the whole audience.
*/
@font-face {
  font-family: 'Noto Sans Bengali';
  src: url('/assets/fonts/noto-sans-bengali-bengali.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0980-09FF, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Noto Sans Bengali';
  src: url('/assets/fonts/noto-sans-bengali-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+2000-206F, U+2212;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: 'Noto Sans Bengali', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-900);
  background: #fff;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--brand-700); }

/* Visible focus, because a keyboard user gets nothing from a removed outline. */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
}

.wrap {
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ---- header ---------------------------------------------------------- */

.site-head {
  border-bottom: 1px solid var(--ink-200);
  background: #fff;
}
.head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  min-height: 4rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ink-900);
  text-decoration: none;
}
.brand img { width: 2rem; height: 2rem; }

/*
  On a phone the menu drops to its own row under the brand and scrolls
  sideways rather than wrapping into three lines of links. On a wide screen it
  sits between the brand and the button.
*/
.site-nav {
  order: 3;
  flex-basis: 100%;
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 -0.5rem;
}
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a {
  flex: none;
  padding: 0.45rem 0.6rem;
  border-radius: 0.5rem;
  color: var(--ink-700);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
}
.site-nav a:hover { background: var(--ink-50); }
.site-nav a[aria-current="page"] { color: var(--brand-700); background: var(--brand-50); }

.head-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

@media (min-width: 60rem) {
  .site-nav { order: 0; flex-basis: auto; margin: 0; }
}

/*
  The language switch is a link, not a control.

  Two real URLs rather than one page with a toggle: it works before any script
  loads, it works if none ever does, each language is indexable on its own, and
  a shopkeeper can send the right one to a friend.
*/
.lang {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-600);
  text-decoration: none;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--ink-300);
  border-radius: 999px;
  white-space: nowrap;
}
.lang:hover { background: var(--ink-50); }

/* ---- buttons --------------------------------------------------------- */

/*
  48px minimum, like every tap target in the app. A marketing page that is
  hard to tap is a marketing page that does not convert on the phone it was
  written for.
*/
.btn {
  display: inline-block;
  min-height: 3rem;
  padding: 0.8rem 1.6rem;
  border-radius: 0.75rem;
  background: var(--brand-700);
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  text-align: center;
}
.btn:hover { background: var(--brand-800); }
.btn-sm {
  min-height: 2.5rem;
  padding: 0.5rem 0.95rem;
  font-size: 0.95rem;
  border-radius: 0.6rem;
  white-space: nowrap;
}
.btn-ghost {
  background: #fff;
  color: var(--brand-800);
  border: 1px solid var(--ink-300);
}
.btn-ghost:hover { background: var(--ink-50); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.btn-note { font-size: 0.95rem; color: var(--ink-600); }

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

.hero {
  background: linear-gradient(180deg, var(--brand-50) 0%, #fff 100%);
  padding: 2.5rem 0 2.5rem;
}
.hero h1 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.9rem, 6.5vw, 2.9rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.lede {
  margin: 0 0 1.5rem;
  font-size: 1.15rem;
  color: var(--ink-700);
  max-width: 36rem;
}
.free-badge {
  display: inline-block;
  margin: 0 0 1rem;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  background: var(--brand-100);
  color: var(--brand-800);
  font-size: 0.9rem;
  font-weight: 700;
}
.hero-grid {
  display: grid;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 56rem) {
  .hero-grid { grid-template-columns: 1.15fr 0.85fr; gap: 3rem; }
}

/* ---- phone frame ------------------------------------------------------ */

/*
  A real screenshot inside a plain bezel. The frame is CSS rather than a
  mock-up image so it costs nothing and never shows a phone brand.
*/
.phone {
  margin: 0 auto;
  width: 100%;
  max-width: 17.5rem;
  border: 0.55rem solid var(--ink-900);
  border-radius: 2rem;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1.25rem 2.5rem -1rem rgba(19, 17, 15, 0.35);
}
.phone img { width: 100%; }
.phone-sm { max-width: 14.5rem; }

figure { margin: 0; }
figcaption {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: var(--ink-600);
  text-align: center;
}

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

section { padding: 3rem 0; }
section h2 {
  margin: 0 0 1rem;
  font-size: clamp(1.5rem, 5vw, 2rem);
  line-height: 1.3;
}
.section-lede { margin: -0.25rem 0 1.75rem; color: var(--ink-700); max-width: 40rem; }
.alt { background: var(--ink-50); }

.cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  padding: 0;
  margin: 0;
  list-style: none;
}
.cards li {
  border: 1px solid var(--ink-200);
  border-radius: 1rem;
  padding: 1.25rem;
  background: #fff;
}
.cards h3 { margin: 0 0 0.35rem; font-size: 1.15rem; }
.cards p { margin: 0; color: var(--ink-700); }
.cards .more { display: inline-block; margin-top: 0.6rem; font-weight: 600; text-decoration: none; }

.band {
  background: var(--brand-700);
  color: #fff;
  text-align: center;
}
.band h2 { margin-bottom: 0.5rem; }
.band p { margin: 0 auto; max-width: 38rem; color: var(--brand-50); }
.band a { color: #fff; font-weight: 700; }

/* ---- feature rows ----------------------------------------------------- */

.feature {
  display: grid;
  gap: 2rem;
  align-items: center;
  /* Top and bottom only. A `padding: 2.5rem 0` shorthand here also set the
     sides to zero, and a `.feature` is usually a `.wrap` too — so it wiped out
     the wrap's side padding and pressed the text against the screen edge. */
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  border-top: 1px solid var(--ink-200);
}
.feature:first-of-type { border-top: 0; }
.feature h2 { margin-bottom: 0.5rem; }
.feature p { color: var(--ink-700); }
.feature .shots { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
@media (min-width: 56rem) {
  .feature { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
  .feature.flip > :first-child { order: 2; }
}

.checks { list-style: none; padding: 0; margin: 1rem 0 0; }
.checks li {
  position: relative;
  padding-left: 1.75rem;
  margin: 0 0 0.55rem;
  color: var(--ink-700);
}
.checks li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.45em;
  width: 0.55rem;
  height: 0.9rem;
  border: solid var(--brand-700);
  border-width: 0 0.18rem 0.18rem 0;
  transform: rotate(45deg);
}
.checks.cross li::before {
  width: 0.9rem;
  height: 0.18rem;
  top: 0.8em;
  left: 0.05rem;
  border: 0;
  background: var(--ink-500);
  transform: none;
}

/* ---- install steps ---------------------------------------------------- */

.steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
}
.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 1.1rem 2.75rem;
  color: var(--ink-700);
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--brand-100);
  color: var(--brand-800);
  font-weight: 700;
  display: grid;
  place-items: center;
}
.steps strong { color: var(--ink-900); }
.app-icon { width: 6.875rem; border-radius: 1.25rem; margin: 0 auto; }

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

.price-card {
  max-width: 30rem;
  margin: 0 auto;
  border: 2px solid var(--brand-700);
  border-radius: 1.25rem;
  padding: 1.75rem 1.5rem;
  background: #fff;
  box-shadow: 0 1rem 2rem -1.25rem rgba(3, 88, 63, 0.4);
}
.price-card h2 { margin: 0; font-size: 1.35rem; }
.price {
  margin: 0.25rem 0 0.25rem;
  font-size: clamp(2.75rem, 12vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--brand-800);
}
.price small { font-size: 1rem; font-weight: 600; color: var(--ink-600); }
.price-card .btn { width: 100%; margin-top: 1.25rem; }
.price-note { margin: 0.75rem 0 0; font-size: 0.95rem; color: var(--ink-600); text-align: center; }

/* ---- dateline ----------------------------------------------------------- */

/* Visible, not only in the JSON-LD. A date a reader cannot see is a date an
   assistant has to take on trust, and the GEO research puts dating alongside
   citing as the thing that actually moves whether content is quoted. */
.dateline {
  font-size: 0.85rem;
  color: var(--ink-700);
  margin: 0 0 1rem;
}

/* ---- breadcrumb --------------------------------------------------------- */

/* Two levels only, and it matches the BreadcrumbList in the page's JSON-LD —
   Google shows a breadcrumb in results only when the markup agrees with what
   the reader can see. */
.crumbs {
  font-size: 0.9rem;
  color: var(--ink-700);
  margin: 0 0 0.75rem;
}
.crumbs a { color: var(--brand-700); }
.crumbs [aria-current] { color: var(--ink-700); }

/* ---- comparison table -------------------------------------------------- */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.compare th, .compare td {
  padding: 0.75rem 0.85rem;
  border-bottom: 1px solid var(--ink-200);
  text-align: left;
  vertical-align: top;
}
.compare thead th { background: var(--ink-100); font-weight: 700; }
.compare tbody th { font-weight: 600; color: var(--ink-900); }
.compare td { color: var(--ink-700); }
.compare .ours { background: var(--brand-50); color: var(--brand-800); font-weight: 600; }

/* Narrow tables — three columns or fewer of short cells — fit a phone instead
   of scrolling sideways. .compare's 40rem floor was made for the many-column
   comparison on /why-haalkhata/, and on its own it pushed a two-column table
   of "খাত | অঙ্ক" past a 360px screen. Wide ledgers keep the floor and scroll. */
.compare.fit { min-width: 0; }
.compare.fit th, .compare.fit td { padding: 0.6rem 0.55rem; }

/* ---- live counts -------------------------------------------------------- */

.stats { padding: 1.5rem 0; border-bottom: 1px solid var(--ink-200); }
.stats[hidden], .stat-row [hidden] { display: none; }
.stat-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* One row, one column per figure the app sent: three normally, fewer if an
     older app sends fewer. Hidden items leave the grid, so no empty column. */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0.75rem;
  text-align: center;
}
.stat-num {
  display: block;
  font-size: clamp(1.3rem, 6vw, 2.5rem);
  font-weight: 800;
  color: var(--brand-700);
  line-height: 1.1;
}
.stat-label { display: block; margin-top: 0.25rem; color: var(--ink-600); font-size: clamp(0.8rem, 3.4vw, 0.95rem); line-height: 1.4; }

/* ---- FAQ -------------------------------------------------------------- */

/*
  <details>, so every answer is in the HTML a crawler reads and opens without
  a line of script.
*/
.faq { max-width: 46rem; }
.faq details {
  border: 1px solid var(--ink-200);
  border-radius: 0.85rem;
  margin: 0 0 0.75rem;
  background: #fff;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 0.9rem 2.75rem 0.9rem 1.1rem;
  font-weight: 700;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--ink-500);
}
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0; padding: 0 1.1rem 1rem; color: var(--ink-700); }

.note {
  border-left: 4px solid var(--brand-600);
  background: var(--ink-50);
  padding: 1rem 1.25rem;
  border-radius: 0 0.75rem 0.75rem 0;
  color: var(--ink-700);
}
/* A note that follows a block it is not part of. A class rather than a
   `style="margin-top"` on the three pages that need it, so the content-security
   policy can forbid inline styles as well as inline scripts. */
.note-apart { margin-top: 1.5rem; }

.closing { text-align: center; }
.closing .lede { margin: 0 auto 1.75rem; }
.closing .btn-row { justify-content: center; }

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

.site-foot {
  border-top: 1px solid var(--ink-200);
  padding: 2rem 0 3rem;
  font-size: 0.95rem;
  color: var(--ink-600);
  background: var(--ink-50);
}
.site-foot a { color: var(--ink-700); }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; margin-bottom: 0.9rem; }
.site-foot p { margin: 0 0 0.35rem; }


/* A phone number reads as a number, not as prose — same as the app. */
.tabular { font-variant-numeric: tabular-nums; }

/* ---- long-form pages (privacy, terms) -------------------------------- */

.prose { max-width: 44rem; padding: 2.5rem 1.25rem 3rem; }
.prose h1 { font-size: clamp(1.75rem, 6vw, 2.25rem); margin: 0 0 0.5rem; }
.prose .updated { color: var(--ink-500); font-size: 0.95rem; margin: 0 0 2rem; }
.prose h2 { font-size: 1.25rem; margin: 2rem 0 0.5rem; }
.prose p, .prose li { color: var(--ink-700); }
.prose ul { padding-left: 1.25rem; }