/* Hisaab — the shared system.
   Loaded first by both pages; page stylesheets follow and may override.

   ONE ACCENT, AND IT MEANS MONEY AT ISSUE. The orange names the money a
   restaurant may be owed and nothing else - not a button, not a link, not a
   surface. This is the one rule carried over unchanged from the previous
   design, because it is the only thing on either page that a restaurant owner
   has to be able to trust at a glance: if the accent ever means "click here",
   it stops meaning "this is what they took".

   THREE FAMILIES, THREE JOBS.
     Poppins Light   display only - the claim, the figures the page is for
     Sora            everything a person reads
     JetBrains Mono  labels, records, data, and the platform's own file
   Devanagari is Noto Sans Devanagari throughout: the document's own voice.

   ONE MEASURE. --page is the content column on both pages; nothing crosses it.
   The report and the landing share it, so the document does not move when a
   file is uploaded. */

:root {
  /* THE GROUND IS WHITE, so separation can no longer come from a tint - it
     comes from the line and the shadow. Two surfaces sit on it: --well, which
     is recessed (window bars, drop zones, table heads, the alternate band),
     and --card, which is raised and stays white. Nothing else is a fill.
     Every surface in the product resolves to one of these; no stylesheet
     hardcodes a ground colour, so this is the one place it changes. */
  --bone: #FFFFFF;
  --card: #FFFFFF;
  --well: #F7F6F3;
  --band: #F7F6F3;
  --white: #FFFFFF;
  --dark: #0E1211;

  --ink: #141917;        /* 14.9:1 on bone */
  --body: #4A4845;       /* 7.6:1  */
  --muted: #6E6B63;      /* 4.9:1 - the floor */
  --line: rgba(20, 25, 23, .15);
  --line-2: rgba(20, 25, 23, .09);

  --accent: #F15412;
  --accent-soft: rgba(241, 84, 18, .10);
  --good: #5C8A00;

  /* ONE HUE PER DEDUCTION TYPE, and the same hue everywhere that type appears:
     the ledger swatch, the share bar segment, the chart column, the review
     sheet. That is the whole justification for them - a reader who learns
     "purple is ads" in the table can follow ads through the graph without a
     second legend. They are identity, like a chain's --mk, never meaning.
     Penalty is the exception and resolves to the accent, because a penalty IS
     the money at issue; that is the one place the two systems touch. */
  --c-comm: #2B6CB0;     /* commission        4.9:1 on white */
  --c-ads:  #7A3E9D;     /* ads               7.0:1 */
  --c-disc: #8A6A00;     /* discount          5.2:1 */
  --c-pen:  var(--accent);
  --c-fees: #176B41;     /* delivery, packing, tax, TDS   5.3:1 */

  --disp: "Poppins", ui-sans-serif, system-ui, sans-serif;
  --sans: "Sora", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --deva: "Noto Sans Devanagari", "Sora", sans-serif;

  --page: 1240px;        /* the content column, both pages */
  --prose: 620px;        /* how wide running text is ever set */
  --pad: 40px;
  --r: 14px;             /* the one corner radius */
  --r-sm: 8px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* the faint dot grid the ground is laid on */
  background-image: radial-gradient(rgba(20, 25, 23, .042) 1px, transparent 1px);
  background-size: 28px 28px;
}

:lang(hi) { font-family: var(--deva); }

a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.wrap { max-width: var(--page); margin: 0 auto; padding: 0 var(--pad); }

/* ---- type ------------------------------------------------------------- */

/* The display face is Poppins at 300 and nothing else uses it. Tight tracking
   is what makes it read as a headline rather than as large body copy. */
h1, h2, .disp {
  font-family: var(--disp); font-weight: 300;
  letter-spacing: -.045em; line-height: 1.0; color: var(--ink); margin: 0;
}
h1 { font-size: clamp(42px, 5.6vw, 76px); }
h2 { font-size: clamp(34px, 4.4vw, 60px); }
h3 {
  font-family: var(--sans); font-weight: 400; font-size: clamp(22px, 2.2vw, 30px);
  letter-spacing: -.02em; line-height: 1.2; margin: 0; color: var(--ink);
}

/* The accent phrase in a headline: orange, with a rule under that phrase only.
   It marks the half of the sentence that is about money at issue. The phrase is
   kept off a line break, because the rule breaks with it and a rule that stops
   mid-sentence and restarts underlines nothing. */
.hl {
  color: var(--accent); display: inline-block;
  box-shadow: inset 0 -2px 0 0 rgba(241, 84, 18, .45);
}

.lead { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--body); max-width: var(--prose); margin: 22px 0 0; }
p { margin: 0 0 16px; color: var(--body); max-width: var(--prose); }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; color: var(--ink); }

/* One grammar for every small label on either page. */
.lbl {
  font-family: var(--mono); font-size: 11px; font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  line-height: 1.6;
}
.lbl--accent { color: var(--accent); }
/* the eyebrow: a short rule, then the label */
.eyebrow { display: flex; align-items: center; gap: 14px; }
.eyebrow::before { content: ""; width: 46px; height: 1px; background: var(--accent); flex: 0 0 auto; }

.num { font-family: var(--mono); font-feature-settings: "tnum" 1; letter-spacing: -.01em; }

/* ---- controls --------------------------------------------------------- */

/* The one button. Ink, pill, with the arrow that says it goes somewhere.
   Never the accent - see the header. */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--ink); color: var(--card);
  font-family: var(--sans); font-size: 15px; font-weight: 500; letter-spacing: -.01em;
  padding: 14px 26px; border: 0; border-radius: 999px; cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
.btn:hover { background: #23302c; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .5; cursor: default; transform: none; }
.btn i { font-style: normal; transition: transform .15s ease; }
.btn:hover i { transform: translateX(3px); }

.btn--ghost { background: none; color: var(--ink); padding: 14px 4px; }
.btn--ghost:hover { background: none; color: var(--accent); }

/* a bordered mono chip, for a fact that is not a control */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 7px 12px; background: var(--well);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.chip--accent { border-color: rgba(241, 84, 18, .4); color: var(--accent); background: var(--accent-soft); }
.chip--good { border-color: rgba(92, 138, 0, .35); color: var(--good); background: rgba(92, 138, 0, .08); }

/* ---- surfaces --------------------------------------------------------- */

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); padding: 26px;
}
.card--raised { background: var(--white); border-color: var(--line-2); box-shadow: 0 1px 2px rgba(20,25,23,.05), 0 20px 44px -22px rgba(20,25,23,.30); }

.section { padding: clamp(72px, 9vw, 132px) 0; }
/* the nav floats over the page, so anything jumped to clears it */
section[id], div[id] { scroll-margin-top: 96px; }
.section--band { background: var(--band); }
.section--dark { background: var(--dark); color: #EDEFEF; }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #EDEFEF; }
.section--dark p { color: rgba(237, 239, 239, .72); }
.section--dark .lbl { color: rgba(237, 239, 239, .55); }
.section--dark .btn { background: var(--card); color: var(--ink); }
.section--dark .btn:hover { background: #fff; }

.section__head { max-width: 900px; margin-bottom: clamp(40px, 5vw, 72px); }
.section__head .lead { margin-top: 20px; }

/* ---- nav -------------------------------------------------------------- */

/* A pill that floats over the page and stays there. */
.nav { position: sticky; top: 16px; z-index: 40; padding: 0 var(--pad); }
.nav__inner {
  max-width: 980px; margin: 0 auto;
  display: flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--line-2); border-radius: 999px;
  padding: 8px 8px 8px 22px;
  box-shadow: 0 10px 30px -18px rgba(20, 25, 23, .5), 0 0 0 1px rgba(255, 255, 255, .5) inset;
}
.nav__mark { font-family: var(--disp); font-weight: 500; font-size: 17px; letter-spacing: -.03em; margin-right: auto; }
.nav__mark b { color: var(--accent); font-weight: 500; }
.nav a.nav__link { font-size: 14px; color: var(--body); padding: 8px 14px; border-radius: 999px; }
.nav a.nav__link:hover { color: var(--ink); background: rgba(20, 25, 23, .05); }
.nav .btn { padding: 11px 20px; font-size: 14px; }

/* ---- reveal ----------------------------------------------------------- */

/* Nothing is hidden until the driver says it can be: if the script never runs,
   the page is fully visible rather than blank. */
.js [data-rise] { opacity: 0; transform: translateY(18px); }
.js [data-rise].is-in { opacity: 1; transform: none; transition: opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-rise] { opacity: 1; transform: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---- narrow ----------------------------------------------------------- */

@media (max-width: 900px) {
  :root { --pad: 22px; }
  .nav__inner { padding-left: 16px; }
  .nav a.nav__link { display: none; }
}