/* ONE stylesheet for index.html and bn.html. The two pages must look the same, and the only
   reliable way to make that true is for there to be nothing to keep in step: a rule lives here once.
   SitePublishGateTest pins the other half — that both pages have the same structure. */

/* ── NO PLACEHOLDERS. `grep -rn FILL_ME site/` must stay empty, and now is: the download panel
   that carried the version and checksum is parked in the COMING-SOON state until an installer
   exists (see the comment above <section id="download">). Restoring it re-introduces exactly two
   facts this repository cannot invent — the version and its SHA-256 — so re-add them to this
   legend at the same time, or the check silently stops guarding anything.
   SCREENSHOTS in site/img/ are real captures of the counter running against the DEMO tenant —
   never a live distributor's data. Re-take them with the recipe in docs/WEBSITE.md when the UI
   changes. The FIELD APP has no shot yet: it needs an Android emulator running. */
:root{
  --navy:#0D1B4B; --blue:#0066FF; --blue-dk:#0047B3;
  --ink:#161B2E; --muted:#5C6684; --faint:#8B93AC;
  --bg:#FFFFFF; --tint:#F4F7FC; --line:#E1E7F2; --line-soft:#EDF1F8;
  --sans:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --shadow:0 1px 2px rgba(13,27,75,.05),0 12px 32px -12px rgba(13,27,75,.16);
}
@media (prefers-color-scheme:dark){
  :root{
    --navy:#E7ECFA; --blue:#5B93FF; --blue-dk:#7FADFF;
    --ink:#E7ECFA; --muted:#A2ACC8; --faint:#7A84A0;
    --bg:#0E1220; --tint:#161B2C; --line:#28304A; --line-soft:#1F2639;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px -12px rgba(0,0,0,.6);
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:64rem;margin:0 auto;padding:0 1.5rem}
/* A class sharing an element with .wrap (`class="wrap bar"`, `class="wrap hero"`) must set its
   vertical padding with padding-block, NEVER the `padding: X 0` shorthand — same specificity,
   declared later, so the shorthand silently zeroes .wrap's 1.5rem side gutter. Both did, so the
   header and the entire hero ran edge-to-edge on a phone while every section below kept its
   gutter: the logo touched the left edge, and the h1, lead, buttons and hero screenshot sat
   flush against both. It is invisible on a desktop, where the 64rem max-width supplies the
   margin instead. */
a{color:var(--blue);text-underline-offset:2px}
h1,h2,h3{color:var(--navy);margin:0;line-height:1.12;letter-spacing:-.025em;font-weight:800}
h1{font-size:clamp(2.1rem,5.4vw,3.4rem)}
h2{font-size:clamp(1.5rem,3.4vw,2.1rem);margin-bottom:.6rem}
h3{font-size:1.02rem;font-weight:700;letter-spacing:-.01em;margin-bottom:.3rem}
p{margin:.7rem 0}
.eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--blue);margin:0 0 .75rem}

/* header */
header{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.85rem}
.brand{display:inline-flex;align-items:center;text-decoration:none}
.brand svg{display:block;height:30px;width:auto}
/* The wordmark's lettering is navy, which disappears on the dark ground — so it takes the ink
   token rather than its baked-in fill, and follows the theme. The blue accent is legible on both
   and keeps its own colour. */
.wm-ink{fill:var(--navy)}
.wm-accent{fill:#0066FF}
@media (prefers-color-scheme:dark){.wm-accent{fill:#5B93FF}}
.bar nav{display:flex;align-items:center;gap:1.4rem;font-size:.92rem;font-weight:500}
.bar nav a{color:var(--muted);text-decoration:none}
.bar nav a:hover{color:var(--blue)}
/* ── the nav below 60rem: one side sheet ───────────────────────────────────────────────────────
   Eight top-level links need 926px of bar — measured, and the same within 3px whether Manrope
   loads or the fallback stack does. Below that the header had two different faults, and this
   replaces both:
     · 641-926px: the links WRAPPED inside the sticky header, taking it from 57px to 98px tall.
       Sticky, so that came off every screenful for the whole page.
     · below 40rem: the old `.hide-sm` rule simply removed six of the eight, leaving Setup and
       Contact — which only repeat the hero's own two buttons. The page's sections were then
       reachable by scrolling alone, on the device this link is mostly opened on (it is shared
       over WhatsApp; see the og:image note at the top of this file).

   CSS-only, via :target, the same mechanism as the lightbox below — this page has no JS and this
   needs none. Two properties make :target right here where a checkbox toggle is wrong:
     · The sheet is position:FIXED, so the fragment is already on screen and the browser scrolls
       nowhere. The reader keeps their place when the menu opens.
     · Picking a link closes the sheet for FREE: the hash moves to that section, so #menu stops
       matching :target. A checkbox stays checked and leaves the panel sitting over the very
       section the reader just asked for — the common case, not an edge case.

   `#nav-closed` is an empty FIXED 0x0 sentinel whose only job is to be a harmless close target.
   `href="#"` means "top of document" (see the lightbox note below), and pointing the X at the
   header's own id would do the same, a sticky element's layout position being the top of the
   page. Being fixed, the sentinel is always in view, so targeting it scrolls nothing. */
.nav-open,.nav-close,.nav-scrim{display:none}
/* Above the breakpoint the nav shows its own language link, so the header pill would say it twice. */
.lang-switch{display:none}
/* display:contents so the links stay DIRECT flex children of <nav> above the breakpoint — the
   desktop bar is then styled by exactly the rules it was before this sheet existed. */
.nav-sheet{display:contents}
.nav-sentinel{position:fixed;top:0;left:0;width:0;height:0}

@media(max-width:60rem){
  /* THE HEADER MUST NOT CARRY backdrop-filter WHERE THE SHEET LIVES INSIDE IT. A backdrop-filter
     makes an element a CONTAINING BLOCK for position:fixed descendants — so `inset:0` on the
     sheet resolved against the header's own 57px box instead of the viewport, and the menu
     opened as a 57px-tall sliver with the links clipped out of it. Measured: 375x57 with the
     filter, 375x844 without. Nothing errors, and it is invisible above the breakpoint because
     the sheet is display:none there. `position:sticky` and z-index do NOT do this; only
     transform, filter, backdrop-filter and will-change. The opaque background replaces what the
     blur was doing behind the translucent one — a phone header is small and solid reads better
     than blurred anyway. */
  header{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg)}

  /* The trigger is a 2.75rem tap target — taller than the 30px wordmark, so left alone it drove
     the sticky header from 57px to 72px. That is 15px off every screenful of a phone, and it
     also dropped each section's heading UNDER the header on arrival: `section{padding:4rem 0}`
     puts a heading 64px into its section, which clears a 57px header and does not clear a 72px
     one. Trimming the bar's own padding holds the header at its original height AND keeps the
     full tap target. */
  .bar{padding-block:.4rem}
  .nav-open{display:inline-flex;align-items:center;justify-content:center;
    width:2.75rem;height:2.75rem;margin-right:-.6rem;border-radius:8px;color:var(--navy)}
  .nav-open:hover{background:var(--tint)}
  /* The language switch, OUT of the menu on a phone, where the nav's own link is hidden inside the
     sheet: someone who lands on the wrong language should not have to guess that the ☰ holds the
     other one. Pushed right to sit beside the ☰ (the nav is position:fixed here, so it takes no
     room in the bar). ~1.9rem tall, under the 2.75rem trigger, so the header stays 57px. */
  .lang-switch{display:inline-flex;align-items:center;margin-left:auto;padding:.3rem .75rem;
    border:1px solid var(--line);border-radius:999px;font-size:.85rem;font-weight:600;line-height:1.2;
    color:var(--navy);text-decoration:none}
  .lang-switch:hover{background:var(--tint)}
  .nav-open svg,.nav-close svg{width:22px;height:22px;stroke:currentColor;fill:none;
    stroke-width:1.9;stroke-linecap:round}

  .bar nav{display:none;position:fixed;inset:0;z-index:20}
  .bar nav:target{display:block}

  .nav-scrim{display:block;position:absolute;inset:0;background:rgba(9,13,26,.55)}

  .nav-sheet{display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;top:0;right:0;height:100%;width:min(18rem,80vw);
    background:var(--bg);border-left:1px solid var(--line);overflow-y:auto;
    padding:calc(env(safe-area-inset-top,0px) + 4.5rem) 1.25rem
            calc(env(safe-area-inset-bottom,0px) + 1.5rem)}
  .nav-sheet a{font-size:1.02rem;padding:.8rem .25rem;border-bottom:1px solid var(--line-soft)}
  .nav-sheet a:last-child{border-bottom:0}

  .nav-close{display:inline-flex;align-items:center;justify-content:center;position:absolute;
    top:calc(env(safe-area-inset-top,0px) + .9rem);right:1.1rem;
    width:2.5rem;height:2.5rem;border-radius:8px;color:var(--muted)}
  .nav-close:hover{background:var(--tint)}
}
/* The page behind a full-height fixed sheet must not scroll under it. :has() is the whole
   mechanism; where it is unsupported the sheet still opens and closes, the page just scrolls
   behind it.
   `scrollbar-gutter` is not a nicety here. On any platform drawing a CLASSIC scrollbar, the
   overflow:hidden takes it away, the page reflows 15px wider, the document gets shorter and the
   scroll position clamps — measured as a 16.5px lurch behind the sheet at the moment it opens.
   Holding the gutter open costs nothing, since a page this long always has a scrollbar anyway.
   Phones draw OVERLAY scrollbars and never had the lurch. Scoped to the breakpoint that owns the
   lock, so nothing above it is touched. */
@media(max-width:60rem){
  html{scrollbar-gutter:stable}
  html:has(.bar nav:target){overflow:hidden}
}

/* hero */
.hero{padding-block:4rem 1rem}
/* The h1's hard <br> splits the line into its two clauses, which is right only while the first
   clause still fits on one line — measured at 36rem. Below that the browser already wraps it,
   so the <br> adds a THIRD break and leaves a stranded short line ("salesmen,") in the middle
   of the heading. Dropping it there costs no extra line — the block is 3 lines either way on a
   390px phone — and evens out the rag. */
@media(max-width:37rem){.hero h1 br{display:none}}
/* NOTE: the h1 markup keeps a SPACE before that <br>. The break is the only thing separating the
   two clauses, so hiding it ran them together ("salesmen,on the same books"). A space before a
   forced break is dropped by the line-breaking algorithm, so it changes nothing above 37rem. */
.hero .lead{font-size:1.16rem;color:var(--muted);max-width:36rem;margin-top:1.1rem}
.cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.9rem}
/* Both .cta pairs are two auto-width pills. Once the column is too narrow to hold them side by
   side they wrap, and two stacked buttons a few px different in width read as a misalignment
   rather than a choice. Below 30rem they stack deliberately, at full width: every current phone
   is under that, so they are consistent across handsets rather than splitting on the ~402px
   where the hero pair happens to stop fitting. */
@media(max-width:30rem){
  .cta{flex-direction:column;align-items:stretch}
  .cta .btn{justify-content:center}
}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.4rem;border-radius:8px;text-decoration:none;font-weight:700;font-size:.98rem;border:1px solid transparent}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-dk)}
.btn-ghost{border-color:var(--line);color:var(--navy);background:var(--bg)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue)}
.trust{margin-top:1.4rem;font-size:.86rem;color:var(--faint)}

/* ── THE PAGE SHOWS, THEN SAYS ─────────────────────────────────────────────────────────────────
   Every section is one headline, one line, and a picture that proves it: a crop of a real screen,
   a chip, a number. Copy that needs a paragraph goes in person, not here — this link is opened on a
   phone, from WhatsApp, by an owner deciding in ten seconds whether to ring.
   The words are still HTML, never text baked into an image: an image of a sentence cannot follow
   the dark theme, blurs on a phone, is invisible to search and to a screen reader, and has to be
   re-drawn for every edit. */
.hero .lead{max-width:34rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem;padding:0;list-style:none}
.chips li{display:inline-flex;align-items:center;gap:.4rem;font-size:.84rem;font-weight:600;color:var(--navy);
  background:var(--tint);border:1px solid var(--line-soft);border-radius:999px;padding:.35rem .8rem}
.chips svg{width:14px;height:14px;stroke:var(--blue);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* screenshots */
figure{margin:0}
figcaption{margin:.7rem 0 0;font-size:.85rem;color:var(--faint);text-align:center}
.frame{border:1px solid var(--line);border-radius:12px;background:var(--tint);box-shadow:var(--shadow);overflow:hidden}
.frame .chrome{display:flex;gap:.35rem;padding:.6rem .75rem;border-bottom:1px solid var(--line-soft);background:var(--bg)}
.frame .chrome i{width:9px;height:9px;border-radius:50%;background:var(--line);display:block}
.frame img{display:block;width:100%;height:auto}
.phone .frame{border-radius:20px;border-width:6px;border-color:var(--navy);background:var(--navy)}
@media (prefers-color-scheme:dark){.phone .frame{border-color:var(--line)}}
.phone .frame img{border-radius:14px}

/* hero stage: the counter and the phone in ONE picture, because "the same books" is the claim */
.stage{position:relative;margin-top:2.75rem;padding-right:9%;padding-bottom:4%}
.stage .phone{position:absolute;right:0;bottom:0;width:21%}
.stage .phone figcaption{display:none}
.float{position:absolute;display:flex;align-items:center;gap:.6rem;background:var(--bg);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow);padding:.65rem .9rem;font-size:.84rem;line-height:1.3;color:var(--muted)}
.float b{display:block;color:var(--navy);font-size:.92rem}
.float .dot{flex:none;width:10px;height:10px;border-radius:50%;background:#22A06B;box-shadow:0 0 0 4px rgba(34,160,107,.18)}
.float .ic-sm{flex:none;width:30px;height:30px;border-radius:8px;background:var(--blue);display:flex;align-items:center;justify-content:center}
.float .ic-sm svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.float-a{left:-1rem;top:38%}
.float-b{right:16%;bottom:-1rem}
@media(max-width:40rem){
  .float{display:none}
  .stage{padding-right:12%}
  .stage .phone{width:27%}
}

/* crops of a real screen. One image, positioned inside a fixed-ratio window, so a crop costs no
   new file and can never drift from the screenshot it came from. The numbers are the crop's
   rectangle in the 1600x953 source: width = 1600/w, left = -x/w, top = -y/h. Re-take the
   screenshot and these must be re-measured. */
.crop{position:relative;overflow:hidden;border-radius:10px;border:1px solid var(--line);background:var(--tint)}
.crop img{position:absolute;max-width:none;height:auto}
.crop-sales{aspect-ratio:800/450}  .crop-sales img{width:200%;left:-30.625%;top:-20%}
.crop-owed{aspect-ratio:540/304}   .crop-owed img{width:296.3%;left:-193.7%;top:-70.39%}
.crop-alert{aspect-ratio:662/372}  .crop-alert img{width:241.69%;left:-38.22%;top:-143.01%}

/* sections */
section{padding:4rem 0;border-top:1px solid var(--line-soft)}
.sub{max-width:40rem;color:var(--muted);font-size:1.05rem;margin-top:0;text-wrap:pretty}
/* balance/pretty stop a heading or a one-line intro stranding its last word ("run.", "are.") on a
   line of its own. Progressive: a browser without them wraps exactly as before. */
h2{text-wrap:balance}
.fine,.card p,.tile p,.scene p,.leak p{text-wrap:pretty}
.center{text-align:center}
.center .sub{margin-left:auto;margin-right:auto}

.cards{display:grid;gap:1.5rem;grid-template-columns:repeat(3,1fr);margin-top:2.25rem}
@media(max-width:52rem){.cards{grid-template-columns:1fr;max-width:32rem}}
.card{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:1rem;box-shadow:var(--shadow)}
.card h3{margin-top:1rem}
.card p{margin:.2rem 0 .2rem;color:var(--muted);font-size:.92rem}

/* three quiet losses — the problem on top, the fix underneath. NO PERCENTAGES: the industry figures
   in circulation are vendor marketing, a cost (expiry) is not revenue, and Distro has no customer
   result yet. Replace with a measured before/after from a real distributor when there is one —
   docs/WEBSITE.md, "No loss percentages". */
.leaks{display:grid;gap:1.25rem;grid-template-columns:repeat(3,1fr);margin-top:2.25rem}
@media(max-width:52rem){.leaks{grid-template-columns:1fr;max-width:32rem}}
/* subgrid, so the three "fix" strips start on one line whatever each problem's length. */
.leak{display:grid;grid-row:span 2;grid-template-rows:subgrid;gap:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--bg)}
.leak .prob{padding:1.25rem 1.25rem 1rem}
.leak .prob .ic{background:#FFF4E5;border-color:#FBE3BF}
.leak .prob .ic svg{stroke:#C77700}
@media (prefers-color-scheme:dark){.leak .prob .ic{background:#2E2415;border-color:#4A3A1E}.leak .prob .ic svg{stroke:#F0A93B}}
.leak .prob p{margin:.25rem 0 0;color:var(--muted);font-size:.92rem}
.leak .fix{display:flex;gap:.6rem;align-items:flex-start;background:var(--tint);border-top:1px solid var(--line-soft);
  padding:1rem 1.25rem;font-size:.92rem;font-weight:600;color:var(--navy);line-height:1.45}
.leak .fix svg{flex:none;width:18px;height:18px;margin-top:.1rem;stroke:#22A06B;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* feature tiles: an icon, a name, a few words. Nothing here should need a second line of body. */
.tiles{display:grid;gap:1rem;grid-template-columns:repeat(4,1fr);margin-top:2.25rem}
@media(max-width:52rem){.tiles{grid-template-columns:repeat(2,1fr)}}
.tile{border:1px solid var(--line);border-radius:14px;padding:1.1rem 1rem;background:var(--bg)}
.tile p{margin:0;color:var(--muted);font-size:.86rem;line-height:1.45}
.ic{width:38px;height:38px;border-radius:10px;background:var(--tint);border:1px solid var(--line-soft);display:flex;
  align-items:center;justify-content:center;margin-bottom:.85rem}
.ic svg{width:19px;height:19px;stroke:var(--blue);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* how it works diagram */
.how{background:var(--tint);border:1px solid var(--line-soft);border-radius:14px;padding:2rem 1.5rem;margin-top:2rem}
.how svg{display:block;width:100%;height:auto;max-width:44rem;margin:0 auto}
/* Every colour comes from the page tokens, so the diagram follows the theme. */
.dg-ink{fill:var(--navy)} .dg-ink-s{stroke:var(--navy)}
.dg-face{fill:var(--bg)}
.dg-bar{fill:var(--line)}
.dg-mute{fill:var(--muted)}
.dg-faint{fill:var(--faint)} .dg-faint-s{stroke:var(--faint)}
.dg-accent{fill:var(--blue)}

/* numbered steps */
.steps{display:grid;gap:1.5rem;grid-template-columns:repeat(3,1fr);margin-top:2rem;padding:0;list-style:none;counter-reset:step}
@media(max-width:44rem){.steps{grid-template-columns:1fr}}
.steps li{counter-increment:step;text-align:center}
.steps li::before{content:counter(step,decimal-leading-zero);display:flex;align-items:center;justify-content:center;
  width:3rem;height:3rem;margin:0 auto .8rem;border-radius:12px;background:var(--tint);border:1px solid var(--line-soft);
  color:var(--blue);font-weight:800;font-size:1.05rem}
.steps b{display:block;color:var(--navy);font-size:1.02rem}
.steps span{display:block;color:var(--muted);font-size:.9rem;margin-top:.2rem}

.shot-row{display:grid;gap:1.75rem;grid-template-columns:repeat(2,1fr);margin-top:2.75rem}
@media(max-width:52rem){.shot-row{grid-template-columns:1fr;max-width:32rem;margin-left:auto;margin-right:auto}}

/* the field band — dark in BOTH themes, because it is the page's one change of scene */
.band{--band-bg:#0D1B4B;background:var(--band-bg);border-top:0;color:#fff}
@media (prefers-color-scheme:dark){.band{--band-bg:#161B2C;border-top:1px solid var(--line)}}
.band h2{color:#fff}
.band .eyebrow{color:#8DB4FF}
.band .sub{color:rgba(255,255,255,.75)}
.band-grid{display:grid;gap:2.5rem 3.5rem;grid-template-columns:auto 1fr;align-items:center}
@media(max-width:52rem){.band-grid{grid-template-columns:1fr}.band-grid .phones{order:2}}
.phones{display:flex;gap:1.25rem;justify-content:center}
.phones .phone{width:11.5rem}
.phones figcaption{color:rgba(255,255,255,.6)}
.band .phone .frame{border-color:#26345F;background:#26345F}
@media(max-width:26rem){.phones .phone{width:calc(50% - .625rem)}}
.pills{display:grid;gap:.75rem;grid-template-columns:repeat(2,1fr);margin-top:1.6rem;padding:0;list-style:none}
@media(max-width:30rem){.pills{grid-template-columns:1fr}}
.pills li{display:flex;align-items:center;gap:.65rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  border-radius:10px;padding:.75rem .9rem;font-weight:600;font-size:.92rem;line-height:1.3}
.pills svg{flex:none;width:18px;height:18px;stroke:#8DB4FF;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* the rate sum — the one argument on the page best made as arithmetic, not prose */
.sum{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem;margin-top:2.25rem;
  background:var(--tint);border:1px solid var(--line-soft);border-radius:14px;padding:1.75rem 1.25rem}
.sum .term{text-align:center;min-width:7rem}
.sum .term b{display:block;font-size:clamp(1.8rem,5vw,2.6rem);font-weight:800;color:var(--navy);letter-spacing:-.03em;line-height:1.1}
.sum .term span{font-size:.82rem;color:var(--muted)}
.sum .op{font-size:1.6rem;font-weight:700;color:var(--faint)}
.sum .result b{color:var(--blue)}
.sum .wrong{flex-basis:100%;text-align:center;font-size:.88rem;color:var(--muted);margin:0}
.sum .wrong s{color:var(--faint)}

/* does / does not */
.split{display:grid;gap:1.25rem;grid-template-columns:1fr 1fr;margin-top:2rem}
@media(max-width:44rem){.split{grid-template-columns:1fr}}
.split > div{border:1px solid var(--line);border-radius:14px;padding:1.4rem 1.4rem 1.1rem}
.split .yes{background:var(--tint)}
.split h3{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.9rem}
.split ul{list-style:none;padding:0;margin:0}
.split li{display:flex;gap:.6rem;align-items:flex-start;padding:.4rem 0;font-weight:600;color:var(--navy)}
.split .no li{color:var(--muted);font-weight:500}
.split svg{flex:none;width:18px;height:18px;margin-top:.15rem;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.split .yes svg{stroke:#22A06B}
.split .no svg{stroke:var(--faint)}
.fine{max-width:44rem;margin-top:1.5rem;font-size:.9rem;color:var(--muted)}

/* scenario cards: the problem in bold, the answer underneath */
.scenes{display:grid;gap:1.25rem;grid-template-columns:repeat(3,1fr);margin-top:2rem}
@media(max-width:52rem){.scenes{grid-template-columns:1fr}}
.scene{border:1px solid var(--line);border-radius:14px;padding:1.4rem}
.scene .ic{width:46px;height:46px;border-radius:12px}
.scene .ic svg{width:22px;height:22px}
.scene b{display:block;color:var(--navy);font-size:1.05rem}
.scene p{margin:.3rem 0 0;color:var(--muted);font-size:.92rem}

/* price — three terms of ONE bundle (1 counter + 2 salesmen). Every figure here includes GST; the
   per-month line is the price divided by the months covered, free months included. */
.plans{display:grid;gap:1.25rem;grid-template-columns:repeat(3,1fr);margin-top:2.25rem}
@media(max-width:52rem){.plans{grid-template-columns:1fr;max-width:28rem;margin-left:auto;margin-right:auto}}
.plan{position:relative;border:1px solid var(--line);border-radius:14px;padding:1.5rem;background:var(--bg);text-align:left}
.plan.best{border-color:var(--blue);box-shadow:var(--shadow)}
.plan h3{margin:0;color:var(--navy)}
.plan .amt{display:block;font-size:2.1rem;font-weight:800;letter-spacing:-.02em;color:var(--navy);margin-top:.5rem;line-height:1.1}
.plan .runs{display:block;margin-top:.35rem;font-weight:600;color:var(--ink)}
.plan .pm{display:block;margin-top:.15rem;font-size:.88rem;color:var(--muted)}
.plan .tag{position:absolute;top:-.7rem;left:1.25rem;background:var(--blue);color:#fff;font-size:.72rem;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.2rem .6rem;border-radius:999px}

/* download (parked — see the comment above <section id="download">) */
.panel{background:var(--tint);border:1px solid var(--line);border-radius:12px;padding:1.25rem 1.5rem;margin-top:2.25rem}
.dl{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;justify-content:space-between}
.meta{font-size:.86rem;color:var(--muted);margin-top:.2rem}
.reqs{display:grid;gap:1rem 2rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));margin-top:1.75rem;
  padding-top:1.5rem;border-top:1px solid var(--line-soft)}
.reqs div{display:flex;flex-direction:column}
.reqs b{font-size:.95rem;color:var(--navy)}
.reqs span{font-size:.88rem;color:var(--muted)}

/* click-to-enlarge — CSS only, via :target. */
a.zoom{display:block;cursor:zoom-in}
/* Closing returns to the figure that was opened, offset to clear the sticky header. */
figure[id]{scroll-margin-top:5.5rem}
.lightbox{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;
  padding:2rem 1.5rem;background:rgba(9,13,26,.82);backdrop-filter:blur(3px)}
.lightbox:target{display:flex}
.lightbox img{max-width:min(96rem,100%);max-height:100%;width:auto;height:auto;border-radius:8px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.7)}
.lightbox .backdrop{position:absolute;inset:0;cursor:zoom-out}
.lightbox .close{position:absolute;top:1rem;right:1.25rem;width:2.5rem;height:2.5rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.14);color:#fff;
  font-size:1.5rem;line-height:1;text-decoration:none}
.lightbox .close:hover{background:rgba(255,255,255,.26)}

/* contact */
.contact-box{background:var(--navy);color:#fff;border-radius:14px;padding:2.5rem 2rem;text-align:center}
@media (prefers-color-scheme:dark){.contact-box{background:var(--tint);border:1px solid var(--line)}}
.contact-box h2{color:#fff}
@media (prefers-color-scheme:dark){.contact-box h2{color:var(--navy)}}
.contact-box p{color:rgba(255,255,255,.78);max-width:34rem;margin:.7rem auto 0}
@media (prefers-color-scheme:dark){.contact-box p{color:var(--muted)}}
.contact-box .cta{justify-content:center}
.contact-box .btn-ghost{border-color:rgba(255,255,255,.35);color:#fff;background:transparent}
.contact-box .btn-ghost:hover{border-color:#fff;color:#fff}
@media (prefers-color-scheme:dark){.contact-box .btn-ghost{border-color:var(--line);color:var(--navy)}}

footer{border-top:1px solid var(--line-soft);padding:2rem 0 3rem;color:var(--faint);font-size:.88rem}
footer a{color:var(--muted)}

/* ── The Bengali page (html[lang="bn"]) only. Manrope carries the English words and digits; every Bengali glyph falls through
   to Noto Sans Bengali (Manrope has none). Bengali needs taller lines for its matras and
   conjuncts, and letter-spacing breaks conjunct shaping, so both are reset here. Everything else in
   this file serves both pages, which is what keeps their design identical. */
html[lang="bn"]{--sans:'Manrope','Noto Sans Bengali',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
html[lang="bn"] body{line-height:1.7}
html[lang="bn"] :is(h1,h2,h3){letter-spacing:0;line-height:1.35}
html[lang="bn"] :is(.eyebrow,.plan .tag){letter-spacing:.02em}