/*
 * The site's colours are the app's colours, named the same way.
 *
 * Taken from Color.kt rather than picked to look similar: a visitor who downloads the app
 * should find the thing they were just looking at. Both themes are here because the app
 * has both, and a reader who keeps their phone on light should not be handed a black page
 * and then a white app.
 *
 * Two accent tokens, not one, and this is the part worth reading before changing:
 *
 *   --accent      what you FILL with -- button backgrounds, the logo, a rule.
 *   --accent-ink  what you WRITE with -- links, a figure, anything that is text.
 *
 * The gold is the app's brand #E8B23A in both themes, as the app has drawn it since
 * 2026-10-16 (it retired the amber #F59E0B that the light theme used to fill with). On the
 * dark theme fill and ink are the same value, because #E8B23A carries 9.53 on a card and
 * the dark #1A1408 written on it carries 9.46, so one tone does both jobs. On light paper
 * it cannot: the fill measures 1.85 against the page, so a link in it fails a reader
 * outright while the same colour behind dark text is perfectly sound. The app hit this
 * exact wall and answered it with a separate ink -- #8A5F04, 5.40 on the page -- and the
 * two live two lines apart there with a long comment saying which is which, because
 * twice a commit about the fill took the ink along with it.
 *
 * So: filling with --accent-ink looks muddy, and writing in --accent is unreadable. They
 * are not two shades of a preference.
 */
:root {
  /* Light — PaperBackground, PaperSurface, PaperOutline, InkText, InkTextMuted. */
  --page: #F8FAFC;
  --card: #FFFFFF;
  --edge: #CBD5E1;
  --accent: #E8B23A;
  --accent-ink: #8A5F04;
  --accent-on-tint: #8A5F04;
  --on-accent: #1A1408;
  --ink: #0F172A;
  --ink-muted: #5A6A80;
  --green: #14713A;
  --red: #B42318;

  /* The quieter surfaces the home page is drawn with: a hairline softer than --edge, the
     inset panel a phone screen or the release card sits on, the bezel of the phone, and
     the faintest text -- the "RECENT" over a list, the line under an entry's name. */
  --rule: #E2E8F0;
  --panel: #F1F5F9;
  --frame: #E2E8F0;
  --ink-faint: #64748B;
  --shadow: 0 30px 60px -24px rgba(15, 23, 42, .28);

  --gutter: 20px;
  --max: 1120px;
  --radius-card: 20px;
  --radius-field: 12px;

  --font: "Roboto", "Noto Sans Bengali", "Hind Siliguri", system-ui, -apple-system,
          "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Noto Sans Bengali",
          monospace;

  color-scheme: light;
}

/* Dark — the owner's drawing of the site, sampled from it: a warm near-black rather than
   the app's cooler NightBackground, a card one step up, and the gold the drawing fills
   its buttons with. Written twice: once for the reader whose system is dark and who has
   not chosen, and once for the reader who pressed the switch. The first is guarded so
   that choosing light on a dark phone actually sticks. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #0C0B0A;
    --card: #151411;
    --edge: #24221E;
    --rule: #1F1D1A;
    --panel: #0F0E0C;
    --frame: #1B1A17;
    --accent: #E8B23A;
    --accent-ink: #E8B23A;
    --accent-on-tint: #E8B23A;
    --on-accent: #1A1408;
    --ink: #F5F2EC;
    --ink-muted: #A29C92;
    --ink-faint: #8A847A;
    --green: #8EDC9A;
    --red: #FF8A7A;
    --shadow: 0 40px 80px -24px rgba(0, 0, 0, .7);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --page: #0C0B0A;
  --card: #151411;
  --edge: #24221E;
  --rule: #1F1D1A;
  --panel: #0F0E0C;
  --frame: #1B1A17;
  --accent: #E8B23A;
  --accent-ink: #E8B23A;
  --accent-on-tint: #E8B23A;
  --on-accent: #1A1408;
  --ink: #F5F2EC;
  --ink-muted: #A29C92;
  --ink-faint: #8A847A;
  --green: #8EDC9A;
  --red: #FF8A7A;
  --shadow: 0 40px 80px -24px rgba(0, 0, 0, .7);

  color-scheme: dark;
}

@media (min-width: 720px) { :root { --gutter: 32px; } }

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  /* Roboto has no Bengali, so a Bangla page falls through to Noto glyph by glyph --
     which is the point of listing it second rather than switching fonts by language. */
  font-family: var(--font);
  /* Bengali sits low in its line and runs into the line below at the leading Latin
     text is happy with. 1.7 is what stops the descenders of one line touching the
     matras of the next. */
  line-height: 1.7;
  font-size: 17px;
}

/* A heading breaks into lines of even length instead of leaving its last word alone on
   the second ("correct by / design", "at a / glance"); body text only refuses to end
   on a single word. Browsers without either simply wrap as before. */
h1, h2, h3 { text-wrap: balance; }
p, dd, figcaption { text-wrap: pretty; }

.wrap { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* -- header -------------------------------------------------------------------
 *
 * Three columns, not a row: the name, the links centred on the page rather than on the
 * space left over, and the controls. `body > header` because the home page has headers of
 * its own inside sections, and none of them should stick to the top.
 */
body > header {
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 10;
  /* The plain colour first: color-mix() arrived in Chrome 111, and a phone stuck on an
     older one drops the whole declaration and scrolls the page under a clear header. */
  background: var(--page);
  background: color-mix(in srgb, var(--page) 90%, transparent);
  backdrop-filter: blur(10px);
}
.bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  column-gap: 24px; min-height: 76px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand b { font-size: 19px; font-weight: 800; letter-spacing: -.3px; }
/* The mark is a file, with its own gold tile drawn in: logo.svg where there are 40 device
   pixels or more to draw it in -- the header on a 2x screen -- and favicon.svg, the
   simplified cut, where there are fewer: the header on a 1x screen, and the footer. */
.brand-tile { display: block; flex: none; width: 32px; height: 32px; }
/* The header picks its cut by screen density; the <picture> around it takes no box. */
.brand picture { display: contents; }
.brand-tile-sm { width: 26px; height: 26px; }

nav { display: flex; align-items: center; gap: 36px; }
nav a {
  color: var(--ink-muted); text-decoration: none; font-size: 15px; font-weight: 500;
  padding: 6px 0;
}
nav a:hover, nav a[aria-current="page"] { color: var(--ink); }

/* The language and theme switches and the download pill, kept together as one item so
   they never wrap apart. */
.switches { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }

/* The language switch is a control; in this header the controls are bare words and
   glyphs, and the pill beside them is the one thing that is filled. */
/* A fixed width, wide enough for the longer of its two faces ("English"), so pressing it
   does not shove the theme switch and the download pill sideways. */
#lang {
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  color: var(--ink); background: none; border: 0; padding: 6px 0;
  width: 64px; text-align: center; flex: none;
}
#lang:hover { color: var(--accent-ink); }

#menu {
  display: none; place-items: center; cursor: pointer;
  width: 40px; height: 40px; padding: 0; margin-right: -8px;
  color: var(--ink); background: none; border: 0;
}
#menu svg { width: 24px; height: 24px; }
#menu path { transition: transform .2s; transform-origin: 12px 12px; }
.menu-open #menu .m-top { transform: translateY(4px) rotate(45deg); }
.menu-open #menu .m-bot { transform: translateY(-4px) rotate(-45deg); }

/* -- hero --------------------------------------------------------------------- */
.hero { padding: 64px 0 40px; }
.hero h1 {
  font-size: clamp(30px, 6vw, 46px); line-height: 1.25; font-weight: 800;
  margin: 0 0 16px; letter-spacing: -1px;
}
.hero p.lead { color: var(--ink-muted); font-size: clamp(16px, 2.4vw, 19px); margin: 0 0 28px; max-width: 34em; }

.cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* The screenshots. Two of each, and the theme picks one -- the same show/hide the
   theme button's own sun and moon use further down this file, rather than a second
   mechanism for the same job. */
.shots {
  display: grid; gap: 24px; margin-top: 8px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.shot { margin: 0; }
.shot img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--edge); border-radius: var(--radius-card);
}
.shot figcaption { margin-top: 10px; color: var(--ink-muted); font-size: 14px; }
.shot .s-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .shot .s-light { display: none; }
  :root:not([data-theme="light"]) .shot .s-dark  { display: block; }
}
:root[data-theme="dark"] .shot .s-light { display: none; }
:root[data-theme="dark"] .shot .s-dark  { display: block; }

.qr {
  display: none;
  margin: 28px 0 0; padding: 16px; gap: 20px; align-items: center;
  background: var(--card); border: 1px solid var(--edge);
  border-radius: 16px; max-width: 600px;
}
/* The square is drawn in black on white and has to stay that way to scan, so it keeps
   its own white behind it on the dark theme rather than inheriting the card. */
/* 185px is the code's 37 modules at exactly 5 pixels each: large enough for a phone
   camera to lock on from arm's length, and a whole number of pixels per module so its
   edges stay sharp -- at 96px they were 2.6, and blurred. The quiet zone is inside the
   file, so no padding here would add to it. */
.qr img { background: #fff; border-radius: 10px; flex: none; image-rendering: pixelated; }
.qr b { display: block; margin-bottom: 4px; font-size: 15px; }
.qr p { margin: 0; color: var(--ink-muted); font-size: 14px; line-height: 1.55; }
@media (min-width: 720px) { .qr { display: flex; } }

/* On a phone the code waits behind a button, for showing to somebody else's camera. */
.qr-share {
  margin: 20px 0 0; background: var(--card); border: 1px solid var(--edge); border-radius: 16px;
}
.qr-share summary {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px;
  cursor: pointer; list-style: none; font-size: 15px; font-weight: 600; color: var(--ink);
}
.qr-share summary::-webkit-details-marker { display: none; }
.qr-share summary .ico { flex: none; width: 20px; height: 20px; color: var(--accent-ink); }
.qr-share summary .chev { margin-left: auto; transition: transform .2s; }
.qr-share[open] summary .chev { transform: rotate(180deg); }
.qr-share summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 16px; }
/* White behind the code in both themes: a camera reads dark squares on light. */
.qr-share img {
  display: block; margin: 4px auto 0; width: min(240px, 70%); height: auto;
  background: #fff; padding: 12px; border-radius: 14px; image-rendering: pixelated;
}
.qr-share p { margin: 14px 0 0; padding: 0 18px 18px; text-align: center; color: var(--ink-muted); font-size: 14.5px; line-height: 1.55; }
@media (min-width: 720px) { .qr-share { display: none; } }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--accent); color: var(--on-accent);
  font-weight: 700; font-size: 16px; text-decoration: none; white-space: nowrap;
  padding: 14px 22px; border-radius: var(--radius-field); border: 0;
}
.btn:hover { filter: brightness(1.06); }
.btn[aria-disabled="true"] { opacity: .6; pointer-events: none; }
.btn-quiet {
  background: transparent; color: var(--ink);
  border: 1px solid var(--edge); font-weight: 600;
}
.btn-quiet:hover { border-color: var(--ink-faint); filter: none; }
.btn-lg { min-height: 56px; padding: 0 28px; }
.btn-pill { min-height: 44px; min-width: 112px; padding: 0 20px; border-radius: 999px; font-size: 15px; }

/* Line icons, drawn at the weight of the text beside them and coloured by whatever holds
   them. One class instead of stroke attributes on thirty separate SVGs. */
.ico {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.meta { color: var(--ink-muted); font-size: 14px; margin: 14px 0 0; }
.meta a { color: var(--accent-ink); }

/* -- cards -------------------------------------------------------------------- */
section { padding: 44px 0; }
h2 { font-size: clamp(22px, 3.4vw, 28px); margin: 0 0 22px; letter-spacing: -.3px; }
.card {
  background: var(--card); border: 1px solid var(--edge);
  border-radius: var(--radius-card); padding: 20px;
}
.card h3 { margin: 0 0 8px; font-size: 17px; }
.card p { margin: 0; color: var(--ink-muted); font-size: 15px; }

/* -- steps -------------------------------------------------------------------- */
ol.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 14px; }
ol.steps li {
  counter-increment: s; position: relative;
  background: var(--card); border: 1px solid var(--edge);
  border-radius: var(--radius-card); padding: 20px 20px 20px 66px;
}
ol.steps li::before {
  content: counter(s);
  position: absolute; left: 20px; top: 18px;
  width: 30px; height: 30px; border-radius: 999px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-on-tint); font-weight: 700; font-size: 15px;
}
ol.steps h3 { margin: 0 0 6px; font-size: 17px; }
ol.steps p { margin: 0; color: var(--ink-muted); font-size: 15px; }

/* -- table -------------------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: start; padding: 12px 14px; border-bottom: 1px solid var(--edge); }
th { color: var(--ink); font-weight: 700; width: 34%; }
td { color: var(--ink-muted); }
tr:last-child th, tr:last-child td { border-bottom: 0; }

/* The fingerprint is a long unbroken string; left to itself it pushes the page wide
   on a phone, which is the one place this is read. */
code.hash {
  display: block; word-break: break-all; font-size: 13px; line-height: 1.6;
  background: var(--page); border: 1px solid var(--edge);
  border-radius: 8px; padding: 12px; color: var(--accent-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* -- footer ------------------------------------------------------------------- */
footer {
  border-top: 1px solid var(--rule); margin-top: 128px;
  padding: 40px 0 72px; color: var(--ink-muted); font-size: 14px;
}
.foot { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px 48px; }
.foot-note { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 14px; }
.foot-note p { margin: 0; }
/* The name is written beside the mark only on a phone, where the footer is the last
   thing on a long scroll and the header is a long way back up. */
.foot-name { display: none; color: var(--ink); font-size: 19px; font-weight: 800; letter-spacing: -.3px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 0; font-weight: 600; }
.foot-links a { color: var(--ink-muted); text-decoration: none; }
.foot-links a:hover { color: var(--ink); }
.foot-ver { color: var(--ink-muted); font-weight: 500; }
.foot-ver:empty { display: none; }

@media (max-width: 719px) {
  footer { margin-top: 72px; padding: 32px 0 56px; }
  .foot { flex-direction: column; }
  .foot-name { display: inline; }
  .foot-note p { flex-basis: 100%; font-size: 15px; line-height: 1.6; }
  .foot-links { font-size: 15px; }
}

@media (prefers-reduced-motion: no-preference) {
  .btn, nav a, #lang { transition: background-color .15s, color .15s, border-color .15s; }
}

/* -- step screenshots ----------------------------------------------------------
 *
 * The warnings in steps 2 and 3 are the part people stop at, so those steps carry a
 * picture of the actual screen rather than a description of it. A reader who has the
 * dialog in front of them should be able to match it to the page at a glance.
 *
 * Each is cropped to the dialog itself. A full phone screen at a readable width came out
 * over a thousand pixels tall, which turned four steps into a scroll; and three quarters
 * of it was the dimmed page behind, which carries nothing the reader needs.
 *
 * So no fixed max-width -- the crops are different shapes, and one number that suits the
 * widest makes the tallest small. They take the column, up to the width they were cut at,
 * so none is ever enlarged past its own pixels.
 */
ol.steps figure { margin: 16px 0 0; }
ol.steps figure img {
  display: block; width: 100%; max-width: 420px; height: auto;
  border: 1px solid var(--edge); border-radius: var(--radius-field);
  background: var(--page);
}
ol.steps figcaption { color: var(--ink-muted); font-size: 13px; margin-top: 8px; max-width: 420px; }

/* -- theme switch --------------------------------------------------------------
 *
 * One button holding both glyphs, with CSS deciding which is shown, so pressing it never
 * waits on script. It offers the theme you are not in -- a moon while you are reading on
 * white -- for the same reason the language button says বাংলা to an English reader.
 */
#theme {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px; padding: 0; cursor: pointer;
  color: var(--ink); background: none; border: 0; border-radius: 999px;
}
#theme:hover { color: var(--accent-ink); }
#theme svg { width: 19px; height: 19px; grid-area: 1 / 1; }

/* Light is the default, so the moon shows and the sun is put away. */
#theme .i-sun  { display: none; }
#theme .i-moon { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #theme .i-sun  { display: block; }
  :root:not([data-theme="light"]) #theme .i-moon { display: none; }
}
:root[data-theme="dark"] #theme .i-sun  { display: block; }
:root[data-theme="dark"] #theme .i-moon { display: none; }

/* -- header on a narrow screen -------------------------------------------------
 *
 * Below 880px the four links no longer fit between the name and the controls, and
 * wrapping them gave rows that read as a header that broke. So they fold behind one
 * button and open as a panel under the bar; the download pill goes too, since the page
 * the reader is on carries its own download button in the first screenful.
 *
 * Only once site.js has loaded (the `js` class on <html>, which that file sets as it
 * runs, right before it wires the button) -- without it there is no button that works, so
 * the links stay in view as a second row instead.
 */
@media (max-width: 879px) {
  .bar { grid-template-columns: 1fr auto; min-height: 64px; }
  .brand b { font-size: 20px; }
  .bar .brand-tile { width: 30px; height: 30px; }
  .btn-pill { display: none; }
  .switches { gap: 10px; }

  nav { grid-column: 1 / -1; flex-wrap: wrap; gap: 4px 20px; padding-bottom: 12px; }

  .js #menu { display: inline-grid; }
  .js nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--gutter) 20px;
    background: var(--page); border-bottom: 1px solid var(--rule);
  }
  .js .menu-open nav { display: flex; }
  .js nav a { font-size: 17px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .js nav a:last-child { border-bottom: 0; }
}
/* Brand, language, theme and menu need about 372px at the sizes above; on a narrower
   phone the menu button was pushed off the edge and the whole page scrolled sideways. */
@media (max-width: 374px) {
  .bar { column-gap: 8px; }
  .brand { gap: 8px; }
  .brand b { font-size: 18px; }
  .bar .brand-tile { width: 28px; height: 28px; }
  .switches { gap: 4px; }
  #lang { width: 58px; }
}

/* =============================================================================
 * The home page
 *
 * Built to the owner's two drawings of it, one at 1440 wide and one at 390, and measured
 * off them in CSS pixels. Everything below is scoped to `.home` or to a class only the
 * home page uses, so the other three pages keep the plainer shapes above.
 * ============================================================================= */

/* Two wordings of the same thing, where the narrow column needs the shorter one. */
.only-narrow { display: none; }
@media (max-width: 719px) {
  .only-wide { display: none; }
  .only-narrow { display: inline; }
}

.num, .num-big { font-variant-numeric: tabular-nums; }
.num { font-family: var(--mono); font-weight: 500; }

/* A small square an icon sits in -- tinted in the accent, or outlined. */
.tile {
  display: inline-grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  color: var(--accent-ink);
}
.tile .ico { width: 19px; height: 19px; }
.tile-lg { width: 48px; height: 48px; }
.tile-lg .ico { width: 20px; height: 20px; }
.tile-line { width: 46px; height: 46px; background: none; border: 1px solid var(--edge); }
.tile-line .ico { width: 18px; height: 18px; }

/* -- hero ----------------------------------------------------------------------- */
/* `.hero` is shared with the other pages and zeroes the side padding; the gutter is put
   back here because this one is also the `.wrap`. */
.hero-home {
  display: grid; grid-template-columns: minmax(0, 720px) 1fr;
  column-gap: 40px; align-items: start;
  padding: 96px var(--gutter) 0;
}

.pill {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 24px; padding: 4px 16px 4px 4px;
  background: var(--card); border: 1px solid var(--edge); border-radius: 999px;
  font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--ink);
}
.pill-tag {
  background: var(--accent); color: var(--on-accent);
  font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px;
}

/* Two lines, always: "Your money, your phone," and then "nobody else." in gold -- the
   owner asked for the sentence to break at its comma and nowhere else. The first line
   is the long one, 11.22em in Manrope at this weight, so the size is whatever makes it
   fit the column it is in (cqi is that column's width) and no larger than 72px. Below
   28px it is allowed to wrap rather than shrink further. */
.hero-copy { container-type: inline-size; }
.hero-home h1 {
  font-size: clamp(28px, 100cqi / 11.4, 72px); line-height: 1.02; font-weight: 800;
  letter-spacing: -.035em; margin: 0;
}
.hero-home h1 span, .hero-home h1 em { display: block; }
.hero-home h1 em { font-style: normal; color: var(--accent-ink); }
.hero-home p.lead {
  font-size: 18px; line-height: 1.78; color: var(--ink-muted);
  margin: 28px 0 0; max-width: 500px;
}
.hero-home .cta { margin-top: 40px; gap: 12px; }
/* The version under the buttons, at every width. The drawing kept it to the phone layout
   and left the desktop naming no version until the band at the foot of the page. */
.hero-home .hero-meta { margin-top: 14px; }

/* -- the app beside the headline ---------------------------------------------- */
.hero-shot { justify-self: end; width: 300px; margin: 18px clamp(0px, 4vw, 60px) 0 0; }

/* -- the four numbers ------------------------------------------------------------- */
.stats-wrap { padding: 64px var(--gutter) 0; }
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); margin: 0;
  background: var(--card); border: 1px solid var(--edge); border-radius: var(--radius-card);
  overflow: hidden;
}
.stats > div { padding: 30px 32px; border-left: 1px solid var(--edge); }
.stats > div:first-child { border-left: 0; }
.num-big {
  font-size: 34px; line-height: 1.1; font-weight: 800; letter-spacing: -1px; color: var(--ink);
}
.stats dd { margin: 10px 0 0; max-width: 230px; color: var(--ink-muted); font-size: 14.5px; line-height: 1.45; }

/* -- sections --------------------------------------------------------------------- */
.home .block { padding: 120px var(--gutter) 0; }
.sec-head { text-align: center; max-width: 700px; margin: 0 auto 56px; }
.eyebrow { margin: 0 0 14px; color: var(--accent-ink); font-size: 14px; font-weight: 700; }
.sec-head h2, .trust h2, .band h2 {
  font-size: clamp(31px, 2.6vw + 12px, 48px); line-height: 1.2; font-weight: 800;
  letter-spacing: -.035em; margin: 0;
}
/* Wide enough for "Everything it does, at a glance" on one line, as drawn, and narrow
   enough that "Private by design, correct by design" takes two lines, balanced. */
.sec-head h2 { max-width: 660px; margin-inline: auto; }
.sec-head p:not(.eyebrow) { margin: 18px auto 0; max-width: 600px; color: var(--ink-muted); font-size: 18px; line-height: 1.6; }

/* -- why -------------------------------------------------------------------------- */
.why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
/* The icon and its heading share a line, the words full width beneath -- the same
   shape as the feature cards. */
.why-card {
  display: grid; grid-template-columns: auto 1fr; align-items: center; align-content: start;
  column-gap: 18px; padding: 32px; border-radius: var(--radius-card);
}
.why-card h3 { margin: 0; font-size: 18px; line-height: 1.4; font-weight: 700; letter-spacing: -.3px; }
.why-card p { grid-column: 1 / -1; margin-top: 18px; font-size: 15px; line-height: 1.72; }
.why-card a { color: var(--accent-ink); text-underline-offset: 3px; }

/* -- at a glance ------------------------------------------------------------------ */
.glance {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 44px 32px;
}
/* Icon beside its heading, the line beneath both -- as on the cards above. */
.glance li { display: grid; grid-template-columns: auto 1fr; align-items: center; align-content: start; column-gap: 14px; }
/* Balancing a two-word heading beside an icon split "Double-entry" at its hyphen. */
.glance h3 { text-wrap: wrap; }
.glance h3 { margin: 0; font-size: 17px; line-height: 1.35; font-weight: 700; letter-spacing: -.2px; }
.glance p { grid-column: 1 / -1; margin: 14px 0 0; color: var(--ink-muted); font-size: 14.5px; line-height: 1.55; }

/* -- questions -------------------------------------------------------------------- */
/* Closed until asked: six answers open at once would be a page of their own. Plain
   <details>, so it opens with the keyboard and with no script at all. */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.faq details { background: var(--card); border: 1px solid var(--edge); border-radius: 16px; }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px; cursor: pointer; list-style: none;
  font-size: 17px; font-weight: 700; line-height: 1.4; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ico { flex: none; width: 20px; height: 20px; color: var(--accent-ink); transition: transform .2s; }
.faq details[open] summary .ico { transform: rotate(180deg); }
.faq summary:hover { color: var(--accent-ink); }
.faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 16px; }
.faq details p { margin: 0; padding: 0 24px 22px; color: var(--ink-muted); font-size: 15.5px; line-height: 1.7; }
@media (max-width: 719px) {
  .faq summary { padding: 18px 20px; font-size: 16px; }
  .faq details p { padding: 0 20px 20px; font-size: 15px; }
}

/* -- why not the Play Store ------------------------------------------------------- */
.trust {
  display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 32px 64px; align-items: center;
  padding: 56px; background: var(--card); border: 1px solid var(--edge); border-radius: 28px;
}
.trust h2 { font-size: clamp(34px, 1.6vw + 16px, 40px); margin-bottom: 24px; }
.trust-copy > p:not(.eyebrow) { margin: 0; color: var(--ink-muted); font-size: 16px; line-height: 1.75; }
.arrow-link {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 28px;
  color: var(--accent-ink); font-weight: 700; font-size: 16px; text-decoration: none;
}
.arrow-link .ico { width: 17px; height: 17px; transition: transform .15s; }
.arrow-link:hover .ico { transform: translateX(3px); }
.trust-link-narrow { display: none; }

.release { background: var(--panel); border: 1px solid var(--edge); border-radius: 16px; }
.release-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 16px 24px; border-bottom: 1px solid var(--edge);
}
.release-head b { font-size: 16px; }
.badge-ok {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green);
  font-size: 13px; font-weight: 600;
}
.badge-ok .ico { width: 13px; height: 13px; stroke-width: 2.5; }
.release-rows { margin: 0; padding: 0 24px 16px; }
.release-rows > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--rule);
}
.release-rows dt { color: var(--ink-muted); font-size: 14.5px; }
.release-rows dd { margin: 0; font-weight: 700; font-size: 14.5px; text-align: end; }
.release-rows .release-hash { display: block; border-bottom: 0; padding-bottom: 4px; }
.release-hash dd { text-align: start; margin-top: 4px; }
.release-hash code {
  display: block; font-family: var(--mono); font-weight: 400; font-size: 13px;
  line-height: 1.6; word-break: break-all; color: var(--ink);
}

/* -- permissions ------------------------------------------------------------------ */
.perms {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
}
.perms .card { display: flex; align-items: flex-start; gap: 20px; padding: 28px; }
.perms h3 { margin: 0 0 6px; font-size: 17px; font-weight: 700; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.perms p { font-size: 15px; line-height: 1.55; }
.badge-soft {
  padding: 2px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-on-tint);
  font-size: 12px; font-weight: 700;
}

/* -- the band --------------------------------------------------------------------- *
 * Gold with the page's own near-black written on it -- the fill colour used as a fill,
 * which is the one job it can do on both themes.
 */
.band {
  text-align: center; padding: 72px 56px;
  background: var(--accent); color: var(--on-accent); border-radius: 28px;
}
.band-meta { margin: 16px 0 32px; font-size: 17px; opacity: .72; min-height: 1.6em; }
.band-cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.btn-dark { background: #0C0B0A; color: #F5F2EC; }
.btn-ghost {
  background: transparent; color: inherit; font-weight: 700;
  border: 1.5px solid color-mix(in srgb, currentColor 28%, transparent);
}
.btn-ghost:hover { filter: none; border-color: currentColor; }

/* -- Bangla ------------------------------------------------------------------------
 * The display sizes above are set as tight as Manrope's Latin allows. Bengali hangs its
 * matras above the line and its vowel signs below, and at a leading of 1 the second line
 * of a headline cuts through the first -- so it gets room, and none of the negative
 * tracking, which only pulls conjuncts into each other.
 */
/* The Bangla first line is 16em, not 11, so it is fitted the same way to its own width. */
html[lang="bn"] .hero-home h1 { font-size: clamp(28px, 100cqi / 16.2, 58px); line-height: 1.3; letter-spacing: 0; }
html[lang="bn"] .pill-tag { letter-spacing: 0; }
html[lang="bn"] .sec-head h2, html[lang="bn"] .trust h2, html[lang="bn"] .band h2 { line-height: 1.35; letter-spacing: 0; }
/* The name stays as it is: it is written in Latin letters in both languages, and
   loosening it here made the logo 24px wider the moment the language changed. */
html[lang="bn"] .num-big { letter-spacing: 0; }

/* -- the narrower layouts --------------------------------------------------------- */
@media (max-width: 1079px) {
  .hero-home { grid-template-columns: 1fr; }
  .why { grid-template-columns: 1fr; }
  .glance { grid-template-columns: repeat(2, 1fr); }
  .trust { grid-template-columns: 1fr; }
  .trust-link-wide { display: none; }
  .trust-link-narrow { display: inline-flex; margin-top: 0; }

  /* Under the words on a narrower screen, centred and a little smaller. */
  .hero-shot { justify-self: center; width: min(270px, 72%); margin: 48px 0 0; }
}

@media (max-width: 719px) {
  .hero-home { padding-top: 40px; }
  .hero-home p.lead { font-size: 17px; line-height: 1.65; margin-top: 28px; }
  .hero-home .cta { flex-direction: column; align-items: stretch; margin-top: 28px; }
  .hero-meta { display: block; text-align: center; margin-top: 12px; }

  .stats-wrap { padding-top: 24px; }
  .stats { grid-template-columns: 1fr 1fr; border-radius: 22px; }
  .stats > div { padding: 18px 20px 20px; border-left: 0; }
  .stats > div:nth-child(even) { border-left: 1px solid var(--edge); }
  .stats > div:nth-child(n+3) { border-top: 1px solid var(--edge); }
  .num-big { font-size: 28px; }
  .stats dd { margin-top: 6px; font-size: 14px; line-height: 1.38; }

  .home .block { padding-top: 72px; }
  .sec-head { margin-bottom: 36px; }
  .eyebrow { margin-bottom: 12px; }
  .sec-head h2 { font-size: 33px; line-height: 1.12; }
  .sec-head p:not(.eyebrow) { margin-top: 12px; font-size: 16px; line-height: 1.55; }

  .why { gap: 16px; }
  .why-card { padding: 25px; border-radius: 22px; }
  .why-card p { margin-top: 14px; line-height: 1.66; }

  .glance { gap: 24px 20px; }
  .glance li { column-gap: 10px; }
  .glance h3 { font-size: 16px; letter-spacing: -.3px; }
  .glance .tile-line { width: 38px; height: 38px; }
  .glance p { margin-top: 10px; font-size: 14px; line-height: 1.45; }
  /* Two to a row beside an icon leaves about 110px for a heading on the narrowest
     phones; a point smaller keeps "In-app updates" in Bangla to two lines. */
  @media (max-width: 389px) { .glance h3 { font-size: 15px; } }

  .trust { padding: 22px 25px 32px; border-radius: 22px; gap: 16px; }
  .trust-link-narrow { margin-top: 12px; }
  .trust h2 { font-size: 30px; line-height: 1.08; margin-bottom: 20px; }
  .trust-copy > p:not(.eyebrow) { font-size: 15px; line-height: 1.7; }
  .release-head { padding: 13px 16px; }
  .release-rows { padding: 0 16px 10px; }
  .release-rows > div { padding: 9px 0; }
  .release-rows dt, .release-rows dd { font-size: 14px; }

  .perms { grid-template-columns: 1fr; gap: 12px; }
  .perms .card { padding: 18px 20px; gap: 16px; }
  .perms .tile { width: 40px; height: 40px; }
  .perms h3 { font-size: 16px; margin-bottom: 4px; }
  .perms p { font-size: 14.5px; line-height: 1.5; }

  .band { padding: 40px 24px 36px; border-radius: 22px; }
  .band h2 { font-size: 32px; line-height: 1.15; }
  .band-meta { margin: 12px 0 20px; font-size: 14px; }
  .band-cta { flex-direction: column; align-items: stretch; gap: 18px; }
  /* On a phone the second choice is a line of text, not a second button the same size
     as the first -- two equal buttons stacked read as "which one?". */
  .btn-ghost {
    border: 0; min-height: auto; padding: 8px 0;
    text-decoration: underline; text-underline-offset: 4px;
  }
}

/* -- the current page in the header ---------------------------------------------
 * The owner's drawing of the features page marks where you are with a gold rule under
 * the link as well as the brighter ink. It belongs to the header, so every page has it;
 * the folded menu on a phone keeps only the ink, since a rule under a full-width row
 * reads as a divider rather than as "you are here".
 */
@media (min-width: 880px) {
  nav a[aria-current="page"] { font-weight: 600; box-shadow: inset 0 -2px var(--accent); padding-bottom: 8px; margin-bottom: -2px; }
}

/* =============================================================================
 * The features page
 *
 * Built to the owner's drawings at 1440 and 390 like the home page, and sharing its
 * pieces: the tile, the card, the band. What is new is below.
 * ============================================================================= */

/* -- hero: centred on a wide screen, left-aligned on a phone ---------------------- */
.feat-hero { text-align: center; padding: 96px var(--gutter) 0; }
.pill-eyebrow {
  display: inline-block; margin: 0 0 20px; padding: 6px 16px;
  background: var(--card); border: 1px solid var(--edge); border-radius: 999px;
  color: var(--accent-ink); font-size: 13px; font-weight: 600; line-height: 1.5;
}
.feat-hero h1 {
  font-size: clamp(44px, 3.4vw + 16px, 64px); line-height: 1.08; font-weight: 800;
  letter-spacing: -.035em; margin: 0;
}
.feat-hero p.lead {
  margin: 22px auto 0; max-width: 580px;
  color: var(--ink-muted); font-size: 18px; line-height: 1.75;
}
.jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 32px; }
.jump a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
  border: 1px solid var(--edge); border-radius: 999px;
  color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none;
}
.jump a:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
/* A jump lands the heading under the sticky header, not behind it. */
.feat [id] { scroll-margin-top: 96px; }

/* -- a section's heading ---------------------------------------------------------- */
.sec-title, .num-title {
  font-size: clamp(30px, 1.2vw + 20px, 36px); line-height: 1.15; font-weight: 800;
  letter-spacing: -.03em; margin: 0;
}
.sec-sub { margin: 8px 0 0; color: var(--ink-muted); font-size: 16px; line-height: 1.6; }
.num-title { display: flex; align-items: center; gap: 16px; margin-bottom: 40px; }
.num-badge {
  display: inline-grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--accent); color: var(--on-accent);
  font-size: 15px; font-weight: 800; letter-spacing: 0;
}

/* -- the six screenshots, each in a drawn phone ----------------------------------- */
.frame {
  position: relative; padding: 5px; border-radius: 26px;
  background: var(--page); border: 2px solid var(--frame);
  box-shadow: var(--shadow);
}
.frame img { display: block; width: 100%; height: auto; border-radius: 21px; }
.frame .s-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .frame .s-light { display: none; }
  :root:not([data-theme="light"]) .frame .s-dark  { display: block; }
}
:root[data-theme="dark"] .frame .s-light { display: none; }
:root[data-theme="dark"] .frame .s-dark  { display: block; }

.shots-row {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px;
  margin-top: 40px;
}
.shots-row .shot { margin: 0; }
.shots-row figcaption { margin-top: 16px; text-align: center; color: var(--ink); font-size: 14.5px; }

/* -- the cards of 01 and 03 ------------------------------------------------------- */
.fcards { display: grid; gap: 20px; }
.fcards-4 { grid-template-columns: repeat(4, 1fr); }
/* The icon and its heading share a line at every width, the words running full width
   beneath them; the heading under the icon left a tall card mostly empty at the top. */
.fcard {
  display: grid; grid-template-columns: auto 1fr; align-items: center; align-content: start;
  column-gap: 16px; padding: 24px; border-radius: var(--radius-card);
}
/* Sized so every heading fits in two lines beside its icon, in both languages; at 18px
   the longer ones ran to three and four. Below 1200px four cards are too narrow for two
   lines at any readable size, so the row breaks into two columns there instead. */
.fcard h3 { margin: 0; font-size: 16px; line-height: 1.35; font-weight: 700; letter-spacing: -.2px; }
.fcard p { grid-column: 1 / -1; margin-top: 16px; font-size: 15px; line-height: 1.7; }
@media (max-width: 1199px) { .fcards-4 { grid-template-columns: repeat(2, 1fr); } }
/* 01 holds six cards since website v2.17.0: three to a row on a wide screen, so the two
   rows come out level, rather than four and a lone pair; two to a row below that. */
.fcards-6 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1199px) { .fcards-6 { grid-template-columns: repeat(2, 1fr); } }

/* -- 02: the words beside a phone -------------------------------------------------- */
.see {
  display: grid; grid-template-columns: minmax(0, 1fr) 292px; gap: 64px; align-items: center;
  padding: 56px; background: var(--card); border: 1px solid var(--edge); border-radius: 28px;
}
.see .num-title { margin-bottom: 32px; }
.see-list { display: grid; gap: 16px; }
.see-item {
  display: flex; align-items: flex-start; gap: 18px; padding: 24px;
  background: var(--panel); border: 1px solid var(--edge); border-radius: 16px;
}
.see-item h3 { margin: 0 0 8px; font-size: 18px; font-weight: 700; letter-spacing: -.2px; }
.see-item p { margin: 0; color: var(--ink-muted); font-size: 15px; line-height: 1.7; }
.frame-lg { padding: 6px; border-radius: 40px; border-width: 3px; }
.frame-lg img { border-radius: 33px; }

/* -- the band, in a row -------------------------------------------------------------- */
.band-row {
  display: flex; justify-content: space-between; align-items: center; gap: 24px 40px;
  text-align: start; padding: 56px;
}
.band-row h2 { font-size: clamp(30px, 1.2vw + 22px, 40px); }
.band-row .band-meta { margin: 10px 0 0; min-height: 0; }
.band-row .band-cta { flex-wrap: nowrap; }

/* -- narrower ------------------------------------------------------------------------ */
@media (max-width: 1079px) {
  .shots-row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; }
  .see { grid-template-columns: 1fr; gap: 32px; }
  .see .see-copy { display: contents; }
  .see .num-title { order: -2; margin-bottom: 0; }
  .see-phone { order: -1; width: 260px; justify-self: center; }
  .see-list { order: 0; }
  .band-row { flex-direction: column; text-align: center; }
}

@media (max-width: 719px) {
  .feat-hero { text-align: start; padding-top: 40px; }
  .pill-eyebrow { margin-bottom: 16px; }
  .feat-hero h1 { font-size: 44px; }
  .feat-hero p.lead { margin: 16px 0 0; font-size: 17px; line-height: 1.6; }
  .jump { justify-content: flex-start; margin-top: 20px; }
  .jump a { min-height: 36px; padding: 0 14px; }
  .shots-block { padding-top: 64px; }

  /* The six become a row wider than the screen that scrolls sideways, each frame
     snapping to the gutter; the row runs to the edge of the screen on both sides so the
     next phone shows half in view, which is what says there is more this way. */
  .shots-row {
    display: flex; gap: 14px; margin: 28px calc(-1 * var(--gutter)) 0;
    padding: 0 var(--gutter) 12px; overflow-x: auto;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  }
  .shots-row .shot { flex: 0 0 158px; scroll-snap-align: start; }
  .shots-row figcaption { font-size: 14px; margin-top: 12px; }

  .num-title { font-size: 30px; gap: 14px; margin-bottom: 24px; }
  .num-badge { width: 36px; height: 36px; font-size: 14px; }

  /* On a phone the cards stack one to a row, a little tighter. */
  .fcards-4, .fcards-6 { grid-template-columns: 1fr; gap: 16px; }
  .fcard { padding: 20px; }
  .fcard h3 { font-size: 17px; }
  .fcard p { margin-top: 12px; line-height: 1.65; }
  .fcard .tile { width: 40px; height: 40px; }

  .see { padding: 20px; border-radius: 22px; gap: 24px; }
  .see .num-title { margin-top: 4px; }
  .see-phone { width: 230px; }
  .see-item { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 16px; padding: 20px; }
  .see-item .tile { width: 40px; height: 40px; }
  .see-item > div { display: contents; }
  .see-item h3 { margin: 0; font-size: 17px; }
  .see-item p { grid-column: 1 / -1; margin-top: 12px; }

  .band-row { padding: 36px 22px 32px; gap: 20px; }
  .band-row h2 { font-size: 29px; letter-spacing: -.04em; }
  .band-row .band-cta { flex-direction: column; align-items: stretch; flex-wrap: wrap; width: 100%; gap: 14px; }
  /* Here the second choice stays a button, as drawn -- unlike the home page's band. */
  .band-row .btn-ghost {
    border: 1.5px solid color-mix(in srgb, currentColor 28%, transparent);
    min-height: 56px; padding: 0 28px; text-decoration: none;
  }
}

/* Bangla on this page, for the same reason as on the home page: the tight tracking that
   suits Manrope pulls conjuncts into one another, and the leading needs room for matras. */
html[lang="bn"] .feat-hero h1, html[lang="bn"] .sec-title, html[lang="bn"] .num-title,
html[lang="bn"] .band-row h2 { letter-spacing: 0; line-height: 1.3; }
html[lang="bn"] .fcard h3, html[lang="bn"] .see-item h3 { letter-spacing: 0; }

/* -- the screenshots, pressable ------------------------------------------------------
 * The frame is a button now, so it drops a button's own look and keeps the phone's; the
 * pointer and a small lift say it can be pressed, and a gold ring shows keyboard focus.
 */
/* A picture that opens full size is a button. :where() keeps this reset at zero
   specificity, so a .frame that is also a .zoom keeps its drawn phone's padding and
   border; a bare picture just loses the button's own look. */
:where(button.zoom) {
  display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none;
  font: inherit; color: inherit; text-align: inherit; cursor: zoom-in;
}
/* The pictures no longer open full size: the owner chose to show them only at page size.
   A .still is the same block a .zoom was, without the button or the pointer. */
:where(div.still) { display: block; width: 100%; }
:where(div.still.frame) { font: inherit; color: inherit; }
/* And they are not offered for saving: no drag, no long-press callout, no "Save image" /
   "Open image in new tab" on a right-click or a long-press -- the pointer passes through the
   picture to the frame behind it. A deterrent, not a lock: what a browser shows it has
   already downloaded, and a screenshot or the developer tools still reach it. */
img {
  -webkit-user-drag: none; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none; pointer-events: none;
}
/* Words for a screen reader that the picture already says to everyone else. */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
button.zoom:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
button.zoom:not(.frame) img { transition: transform .2s, box-shadow .2s; }
button.zoom:not(.frame):hover img { transform: translateY(-3px); box-shadow: var(--shadow); }

/* Zero specificity, like the reset above: a phone drawn at a set width -- the big one on
   the features page, 260px and then 230px -- keeps it. As plain `button.frame` this
   outranked `.see-phone` and stretched that phone to the whole column. */
:where(button.frame) {
  display: block; width: 100%; font: inherit; color: inherit; cursor: zoom-in;
  transition: transform .2s, border-color .2s;
}
button.frame:hover { transform: translateY(-4px); border-color: var(--edge); }
button.frame:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* -- the full-size view ------------------------------------------------------------ */
.lightbox {
  /* vh before each dvh: dvh is Chrome 108 and up, and without it the picture had no cap. */
  width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent; color: #F5F2EC;
  overflow: hidden;
}
.lightbox[open] {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
}
.lightbox::backdrop { background: rgba(8, 7, 6, .88); backdrop-filter: blur(6px); }
/* While it is open the page behind does not scroll under the reader's wheel. */
.lb-open, .lb-open body { overflow: hidden; }

.lb-figure {
  grid-column: 2; margin: 0; height: 100vh; height: 100dvh; padding: 24px 0 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  min-width: 0;
}
.lb-figure img {
  display: block; min-height: 0; max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); max-width: 100%;
  width: auto; height: auto; border-radius: 28px;
  border: 2px solid rgba(255, 255, 255, .12); box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.lb-figure figcaption { font-size: 15px; font-weight: 600; text-align: center; }
.lb-count { white-space: nowrap; margin-left: 8px; color: rgba(245, 242, 236, .55); font-weight: 500; font-variant-numeric: tabular-nums; }

.lb-btn {
  display: inline-grid; place-items: center; cursor: pointer;
  width: 48px; height: 48px; margin: 0 24px; padding: 0; border-radius: 999px;
  color: #F5F2EC; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14);
  transition: background-color .15s;
}
.lb-btn:hover { background: rgba(255, 255, 255, .16); }
.lb-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lb-btn .ico { width: 22px; height: 22px; }
.lb-prev { grid-column: 1; }
.lb-next { grid-column: 3; }
.lb-close { position: absolute; top: 16px; right: 16px; margin: 0; z-index: 1; }

@media (prefers-reduced-motion: no-preference) {
  .lightbox[open] .lb-figure img { animation: lb-in .18s ease-out; }
  @keyframes lb-in { from { opacity: 0; transform: scale(.97); } }
}

/* On a phone the arrows sit over the picture's lower corners, where a thumb is, and the
   picture takes the whole width between the gutters. */
@media (max-width: 719px) {
  .lightbox[open] { grid-template-columns: 1fr; }
  .lb-figure { grid-column: 1; grid-row: 1; padding: 64px 16px 16px; }
  .lb-figure img { max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); border-radius: 22px; }
  .lb-prev, .lb-next { position: absolute; bottom: 14px; margin: 0; grid-column: auto; }
  .lb-prev { left: 16px; }
  .lb-next { right: 16px; }
  .lb-figure figcaption { padding: 0 64px; }
}

/* =============================================================================
 * The install page
 *
 * Built to the owner's drawings at 1440 and 390. Each step is a card of its own, its
 * pictures beside or under the words, and on a phone a step with several pictures shows
 * them one at a time with Prev and Next under them.
 * ============================================================================= */

/* -- hero ------------------------------------------------------------------------ */
.inst-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) 410px; gap: 48px; align-items: end;
  padding: 88px var(--gutter) 0;
}
.inst-hero .pill-eyebrow { margin-bottom: 18px; }
.inst-hero h1 {
  font-size: clamp(40px, 3.4vw + 16px, 64px); line-height: 1.08; font-weight: 800;
  letter-spacing: -.035em; margin: 0;
}
.inst-hero p.lead { margin: 18px 0 0; max-width: 600px; color: var(--ink-muted); font-size: 17px; line-height: 1.75; }
.inst-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin-top: 28px; }
.inst-cta .meta { margin: 0; }

.toc {
  list-style: none; margin: 0; padding: 12px 24px;
  background: var(--card); border: 1px solid var(--edge); border-radius: 16px;
}
.toc li + li { border-top: 1px solid var(--rule); }
.toc a {
  display: flex; align-items: center; gap: 14px; padding: 14px 0;
  color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 600;
}
.toc a:hover > span:nth-child(2) { color: var(--accent-ink); }
.toc-n {
  display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent); font-size: 13px; font-weight: 800;
}
.toc-warn { margin-left: auto; color: var(--accent-ink); font-size: 12px; font-weight: 700; }

/* -- the steps ----------------------------------------------------------------------- */
/* minmax(0, 1fr), not the implicit auto column: a sideways-scrolling gallery inside a
   step is as wide as all its pictures, and an auto track grew to fit it, so on a 320px
   phone every step ran 19px past the edge. */
.inst-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 96px; }
.step {
  padding: 40px; background: var(--card); border: 1px solid var(--edge); border-radius: var(--radius-card);
  scroll-margin-top: 96px;
}
.step .num-title { font-size: 26px; gap: 14px; margin: 0; }
.step-copy > p:not(.warn-chip), .step-body { margin: 16px 0 0; color: var(--ink-muted); font-size: 15.5px; line-height: 1.75; }
.step-copy b, .step-body b { color: var(--ink); font-weight: 700; }
.warn-chip {
  display: inline-flex; align-items: center; gap: 8px; margin: 18px 0 0; padding: 6px 12px;
  border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-on-tint); font-size: 13px; font-weight: 700;
}
.warn-chip .ico { width: 15px; height: 15px; }

.step-split { display: grid; grid-template-columns: 410px minmax(0, 1fr); gap: 36px; align-items: start; }
/* The body sits on the same line the pictures start on in steps 1 and 2. */
.step-head { display: grid; grid-template-columns: 410px minmax(0, 1fr); gap: 24px 36px; align-items: center; }
.step-head .step-body { margin: 0; }

/* The pictures. System dialogs are pictures with their own grey margin, so they only
   take a corner and a hairline; the app's own screens go in the drawn phone. */
.step-pics { min-width: 0; }
.gal-track { display: flex; gap: 20px; align-items: flex-start; }
.pic { margin: 0; flex: 1 1 0; min-width: 0; max-width: 360px; }
/* Bare dialog screenshots only. A drawn phone is also a .zoom, and reaching its pictures
   here showed both of its light and dark pair at once and put a border round each. */
.pic > img, .pic > button.zoom:not(.frame) > img, .pic > div.still:not(.frame) > img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--edge); }
.pic figcaption { margin-top: 10px; color: var(--ink-muted); font-size: 13.5px; line-height: 1.5; }
.step-wide .step-pics { margin-top: 36px; }
.gal-3 .pic { max-width: none; }
.pic-label { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 14px; font-weight: 600; }
.pic-letter {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 999px;
  border: 1px solid var(--edge); font-size: 12px; font-weight: 700; color: var(--ink-muted);
}
.gal-phones .gal-track { justify-content: center; gap: 24px; }
.gal-phones .pic { flex: 0 1 290px; }
.gal-phones .frame { padding: 6px; border-radius: 40px; border-width: 3px; }
.gal-phones .frame img { border-radius: 33px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.chips span {
  padding: 5px 13px; border: 1px solid var(--edge); border-radius: 999px;
  font-size: 13.5px; font-weight: 600; color: var(--ink);
}

.done {
  display: flex; align-items: center; gap: 16px; margin: 32px 0 0; padding: 20px 22px;
  border-radius: 14px; background: color-mix(in srgb, var(--green) 13%, var(--card));
  font-size: 16px; font-weight: 600; color: var(--ink);
}
.done-tick {
  display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 999px;
  background: var(--green); color: #0C0B0A;
}
.done-tick .ico { width: 17px; height: 17px; stroke-width: 2.6; }

/* Prev and Next exist for the phone layout only. */
.gal-nav { display: none; }

/* -- checking the file ----------------------------------------------------------- */
.verify { display: grid; grid-template-columns: minmax(0, 1fr) 544px; gap: 32px 64px; align-items: start; }
.pill-quiet { color: var(--ink-muted); }
.verify .sec-title { margin-top: 2px; }
.verify-copy > p:not(.pill-eyebrow) { margin: 16px 0 0; color: var(--ink-muted); font-size: 16px; line-height: 1.75; max-width: 460px; }
.hash-card { padding: 24px; background: var(--card); border: 1px solid var(--edge); border-radius: var(--radius-card); }
.hash-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
.hash-head b { font-size: 15px; }
.copy-btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 8px 14px; border-radius: 10px; font: inherit; font-size: 14px; font-weight: 600;
  color: var(--ink); background: var(--panel); border: 1px solid var(--edge);
}
.copy-btn[hidden] { display: none; }
.copy-btn .ico { width: 16px; height: 16px; }
.copy-btn:hover { border-color: var(--ink-faint); }
.copy-btn.is-done { color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, transparent); }
.hash-card code.hash {
  padding: 16px 18px; border-radius: 12px; background: var(--panel);
  font-size: 14.5px; line-height: 1.6; color: var(--accent-ink);
}

/* -- narrower -------------------------------------------------------------------- */
@media (max-width: 1079px) {
  .inst-hero { grid-template-columns: 1fr; gap: 32px; }
  .step-split { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .step-head { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .verify { grid-template-columns: 1fr; }
}

@media (max-width: 719px) {
  .inst-hero { padding-top: 40px; gap: 28px; }
  .inst-hero h1 { font-size: 44px; line-height: 1.02; }
  .inst-hero p.lead { font-size: 16px; line-height: 1.65; }
  .inst-cta { flex-direction: column; align-items: stretch; gap: 14px; margin-top: 24px; }
  .inst-cta .meta { text-align: center; }
  .toc { padding: 4px 18px; }
  .toc a { padding: 12px 0; }

  .inst-steps { gap: 20px; padding-top: 48px; }
  .step { padding: 20px; border-radius: 22px; }
  .step .num-title { font-size: 24px; }
  .step-copy > p:not(.warn-chip), .step-body { font-size: 15.5px; line-height: 1.6; }
  .step .chips { display: none; }
  .step-head { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .step-head .step-body { margin-top: 14px; }
  .step-wide .step-pics { margin-top: 20px; }

  /* One picture at a time: the row scrolls sideways a picture's width per step, and the
     buttons under it do the same for anyone who does not think to swipe. */
  .gal-track {
    gap: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none;
    align-items: flex-start; transition: height .25s ease;
  }
  .gal-track::-webkit-scrollbar { display: none; }
  .gal .pic, .gal-phones .pic { flex: 0 0 100%; max-width: none; scroll-snap-align: start; }
  /* The wide layout centres the three phones with a gap between; a strip that scrolls
     must start at its left edge with none, or the first picture sits out of reach. */
  .gal-phones .gal-track { gap: 0; justify-content: flex-start; }
  .gal-phones .frame { width: 66%; margin: 0 auto; }
  .gal-phones figcaption { text-align: center; padding: 0 12px; }
  .pic-label { gap: 5px; font-size: 15px; }
  .pic-letter { display: inline; width: auto; height: auto; border: 0; font-size: 15px; color: var(--ink); }
  .pic-letter::after { content: " ·"; }

  .gal-nav { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
  .gal-btn {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    min-height: 44px; padding: 0 16px; border-radius: 12px; font: inherit; font-size: 15px; font-weight: 700;
    color: var(--ink); background: none; border: 1px solid var(--edge);
  }
  .gal-btn .ico { width: 18px; height: 18px; }
  .gal-btn:disabled { color: var(--ink-faint); cursor: default; }
  .gal-next { margin-left: auto; background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
  .gal-next:disabled { background: none; color: var(--ink-faint); border-color: var(--edge); }
  .gal-dots { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
  .gal-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--edge); transition: width .2s; }
  .gal-dot.on { width: 22px; background: var(--accent); }
  .gal-count { color: var(--ink-muted); font-size: 14px; font-variant-numeric: tabular-nums; }

  .done { margin-top: 20px; padding: 14px; gap: 10px; font-size: 14.5px; }
  .done-tick { width: 28px; height: 28px; }

  .verify-copy > p:not(.pill-eyebrow) { font-size: 16px; line-height: 1.65; }
  .hash-card { padding: 20px 18px; }
  .hash-card code.hash { font-size: 13.5px; }
}

html[lang="bn"] .inst-hero h1, html[lang="bn"] .step .num-title { letter-spacing: 0; line-height: 1.3; }

/* =============================================================================
 * The privacy page
 *
 * Built to the owner's drawings at 1440 and 390: the short answers first, as four
 * figures, then each section a card with its icon -- and on a wide screen a list of
 * the sections beside them that follows the reader down.
 * ============================================================================= */
.priv-hero { padding: 72px var(--gutter) 0; }
.priv-hero h1 {
  font-size: clamp(44px, 3.4vw + 16px, 64px); line-height: 1.08; font-weight: 800;
  letter-spacing: -.035em; margin: 0;
}
.priv-hero p.lead { margin: 20px 0 0; max-width: 760px; color: var(--ink-muted); font-size: 18px; line-height: 1.7; }

.priv-sum {
  display: grid; grid-template-columns: repeat(4, 1fr); margin: 40px 0 0;
  /* The same gold in both themes, so the words on it are dark in both too -- the theme's
     ink would turn light on the dark theme and vanish into the yellow. */
  --priv-sum-rule: rgba(26, 20, 5, .16);
  background: #E8B23A; border: 1px solid var(--priv-sum-rule); border-radius: var(--radius-card); overflow: hidden;
}
.priv-sum > div { padding: 22px 24px 24px; border-left: 1px solid var(--priv-sum-rule); }
.priv-sum > div:first-child { border-left: 0; }
.priv-sum dt { color: rgba(26, 20, 5, .72); font-size: 13px; }
.priv-sum dd { margin: 8px 0 0; color: #1a1405; font-size: 20px; font-weight: 800; letter-spacing: -.3px; line-height: 1.3; }

.priv-body {
  display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 56px;
  align-items: start; padding-top: 72px;
}

.priv-toc { position: sticky; top: 104px; display: flex; flex-direction: column; }
.priv-toc p {
  margin: 0 0 16px 12px; color: var(--ink-muted); font-size: 12px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
}
.priv-toc a {
  padding: 8px 12px; border-left: 2px solid var(--edge);
  color: var(--ink-muted); font-size: 14px; line-height: 1.45; text-decoration: none;
}
.priv-toc a:hover { color: var(--ink); }
.priv-toc a.on { color: var(--ink); font-weight: 700; border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); }

.priv-cards { display: grid; gap: 20px; }
.pcard {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px;
  padding: 32px; background: var(--card); border: 1px solid var(--edge); border-radius: var(--radius-card);
  scroll-margin-top: 96px;
}
.pcard h2 { margin: 6px 0 14px; font-size: 24px; font-weight: 800; letter-spacing: -.4px; line-height: 1.25; }
.pcard p { margin: 0; color: var(--ink-muted); font-size: 15.5px; line-height: 1.75; }
.pcard p b { color: var(--ink); }
.pcard .chips { margin-top: 18px; }
.pcard .chips span { font-size: 13px; }

.pcard-hi {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--edge));
  background: color-mix(in srgb, var(--accent) 4%, var(--card));
}
.tile-fill { background: var(--accent); color: var(--on-accent); }

.pboxes { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pboxes > * { padding: 16px 18px; background: var(--panel); border: 1px solid var(--edge); border-radius: 14px; }
.pnet li { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; color: var(--ink); }
.plabel { font-size: 12px !important; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 10px !important; }
.goes .plabel { color: var(--green) !important; }
.stays .plabel { color: var(--red) !important; }
.pitem { display: flex; align-items: center; gap: 10px; color: var(--ink) !important; font-weight: 600; font-size: 15px !important; line-height: 1.9 !important; }
.pitem .ico { width: 16px; height: 16px; stroke-width: 2.5; }
.goes .ico { color: var(--green); }
.stays .ico { color: var(--red); }
.pnote { margin-top: 6px !important; font-size: 13px !important; line-height: 1.5 !important; }

.ptable { margin: 4px 0 0; background: var(--panel); border: 1px solid var(--edge); border-radius: 14px; overflow: hidden; }
.ptable > div { display: grid; grid-template-columns: 180px 1fr; gap: 16px; padding: 16px 18px; border-top: 1px solid var(--edge); align-items: center; }
.ptable > div:first-child { border-top: 0; }
.ptable dt { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ptable dd { margin: 0; color: var(--ink-muted); font-size: 14.5px; line-height: 1.55; }

@media (max-width: 1079px) {
  .priv-body { grid-template-columns: 1fr; }
  .priv-toc { display: none; }
}

@media (max-width: 719px) {
  .priv-hero { padding-top: 40px; }
  .priv-hero h1 { font-size: 42px; }
  .priv-hero p.lead { margin-top: 14px; font-size: 15.5px; line-height: 1.65; }
  .priv-sum { grid-template-columns: 1fr 1fr; margin-top: 28px; }
  .priv-sum > div { padding: 16px 18px 18px; border-left: 0; }
  .priv-sum > div:nth-child(even) { border-left: 1px solid var(--priv-sum-rule); }
  .priv-sum > div:nth-child(n+3) { border-top: 1px solid var(--priv-sum-rule); }
  .priv-sum dt { font-size: 12px; }
  .priv-sum dd { margin-top: 6px; font-size: 15.5px; }
  .priv-body { padding-top: 40px; }
  .priv-cards { gap: 16px; }

  /* The icon moves up beside the heading and the words take the full width under both. */
  .pcard { display: grid; grid-template-columns: auto 1fr; gap: 0 14px; padding: 20px 18px; border-radius: 22px; align-items: center; }
  .pcard .tile { width: 40px; height: 40px; }
  .pcard > div { display: contents; }
  .pcard h2 { margin: 0; font-size: 18.5px; line-height: 1.25; }
  .pcard > div > :not(h2) { grid-column: 1 / -1; }
  .pcard > div > p:first-of-type { margin-top: 14px; }
  .pcard p { font-size: 14.5px; line-height: 1.65; }
  .pboxes { margin-top: 16px; gap: 8px; }
  .pnet li { padding: 12px 14px; font-size: 14px; }
  .ptable > div { padding: 12px 14px; }
  .ptable dd { font-size: 14px; }

  .pboxes { grid-template-columns: 1fr; }
  .pgo { gap: 0; padding: 0; }
  .pgo > div { border-radius: 0; border: 0; }
  .pgo { border: 1px solid var(--edge); border-radius: 14px; overflow: hidden; background: var(--panel); }
  .pgo .stays { padding-top: 4px; }
  .pnote { display: none; }

  .ptable > div { grid-template-columns: 1fr; gap: 4px; }
}

html[lang="bn"] .priv-hero h1, html[lang="bn"] .pcard h2 { letter-spacing: 0; line-height: 1.35; }

/* -- the note after a download starts ---------------------------------------------- */
/* Pinned to the foot of the screen, over the page, until it is closed: the reader is
   waiting on the download, not reading on. */
.dl-note {
  /* Under the sticky header (z-index 10), so the opened menu is never covered. */
  position: fixed; z-index: 9; left: 50%; bottom: 16px; transform: translateX(-50%);
  width: min(440px, calc(100% - 2 * var(--gutter)));
  padding: 18px 48px 18px 20px;
  background: var(--card); border: 1px solid var(--edge); border-radius: 18px;
  box-shadow: 0 20px 50px -12px rgba(0, 0, 0, .55);
  font-size: 14.5px; line-height: 1.5; color: var(--ink);
}
.dl-note ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dl-note li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; }
.dl-note li .ico { width: 20px; height: 20px; margin-top: 1px; }
.dl-note .dl-done .ico { color: var(--accent-ink); }
.dl-note .dl-wait .ico { color: var(--accent-ink); }
.dl-note .dl-wait span, .dl-note .dl-next span { color: var(--ink-muted); }
.dl-note .dl-next .ico { color: var(--ink-faint); }
.dl-note b { color: var(--ink); }
.dl-note-guide {
  display: inline-block; margin: 12px 0 0 32px; color: var(--accent-ink);
  font-weight: 700; text-underline-offset: 3px;
}
.dl-note-x {
  position: absolute; top: 10px; right: 10px; width: 36px; height: 36px;
  display: grid; place-items: center; padding: 0; cursor: pointer;
  background: none; border: 0; border-radius: 10px; color: var(--ink-muted);
}
.dl-note-x:hover { color: var(--ink); background: var(--panel); }
.dl-note-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dl-note-x .ico { width: 18px; height: 18px; }
@media (prefers-reduced-motion: no-preference) {
  .dl-note-in { animation: dl-note-up .25s ease-out; }
  /* Turns for about as long as a slow download takes, then rests, not forever. */
  .dl-note .dl-wait .ico { animation: dl-spin 1.1s linear 40; }
}
@keyframes dl-note-up { from { opacity: 0; transform: translate(-50%, 12px); } }
@keyframes dl-spin { to { transform: rotate(360deg); } }