/* Hisaab landing. The system is in loop-base.css, loaded first.

   The page makes one argument in one order: your app's number and your bank's
   number disagree -> here is where the disagreement lives -> here is the part
   of it that was never owed -> send us the file. Every section is a step in
   that, and nothing on the page is here for any other reason. */

/* what a person gets back, stated once under the control that starts it */
.up__after { display: flex; align-items: center; gap: 10px; margin-top: 16px; justify-content: center; }
.up__after .lbl { color: var(--muted); }

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

.hero { padding: clamp(56px, 7vw, 96px) 0 clamp(56px, 6vw, 88px); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero h1 { max-width: 12ch; }
.hero__cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 30px; }
.hero__src { margin-top: 44px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hero__src .lbl { margin-right: 4px; }

/* THE UPLOADER. The one thing on the page a person can act on, so it is the
   one raised surface: white against the bone, everything else flat. */
.up { position: relative; }
.up__card { padding: 24px; }
.up__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line-2); }
.up__title { font-size: 19px; font-weight: 500; letter-spacing: -.02em; color: var(--ink); margin: 18px 0 4px; }
.up__sub { font-size: 14px; color: var(--muted); margin: 0 0 18px; }
.up__drop {
  display: block; position: relative; cursor: pointer; text-align: center;
  border: 1.5px dashed rgba(20, 25, 23, .22); border-radius: var(--r-sm);
  padding: 30px 18px; background: var(--well);
  font-size: 14px; color: var(--muted);
  transition: border-color .15s, background .15s, color .15s;
}
.up__drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.up__drop:hover { border-color: rgba(20, 25, 23, .4); }
.up__drop.is-over { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.up__drop .chosen { color: var(--ink); font-weight: 500; }
.up__drop b { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 400; margin-top: 8px; color: var(--muted); }
.up__go { width: 100%; justify-content: center; margin-top: 16px; }
.up__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 0 4px; }
.up__alt { background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--sans); font-size: 13.5px; color: var(--muted); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; text-decoration-color: var(--line); }
.up__alt:hover { color: var(--accent); text-decoration-color: currentColor; }

.notice {
  font-family: var(--mono); font-size: 12px; line-height: 1.7; letter-spacing: -.01em;
  color: var(--ink); background: var(--accent-soft);
  border: 1px solid rgba(241, 84, 18, .35); border-radius: var(--r-sm);
  padding: 12px 16px; margin-bottom: 26px; max-width: var(--prose);
}

/* ---- the disagreement -------------------------------------------------- */

/* Three artifacts, laid out the way they actually reach an owner: the file the
   platform exports, the statement page the rates are buried on, and the line
   that landed in the bank. They are the evidence the page is about, so they
   are drawn as the things themselves, in the platform's own mono. */
.eviD { display: grid; grid-template-columns: 1.15fr .95fr .9fr; gap: 20px; align-items: start; }
.evi { padding: 0; overflow: hidden; }
.evi__bar {
  display: flex; align-items: center; gap: 8px; padding: 11px 14px;
  border-bottom: 1px solid var(--line-2); background: var(--well);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; color: var(--muted);
}
.evi__bar span:last-child { margin-left: auto; letter-spacing: .12em; text-transform: uppercase; }
.evi__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); flex: 0 0 auto; }
.evi__body { padding: 14px; font-family: var(--mono); font-size: 11px; line-height: 1.9; color: var(--body); }
.evi__row { display: grid; grid-template-columns: 1fr auto; gap: 12px; }
.evi__row.is-flag { color: var(--accent); }
.evi__row.is-mute { color: rgba(110, 107, 99, .6); }
.evi__note { padding: 12px 14px; border-top: 1px solid var(--line-2); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.evi__big { font-family: var(--disp); font-weight: 300; font-size: 30px; letter-spacing: -.04em; color: var(--ink); font-feature-settings: "tnum" 1; }
.evi__pdf { padding: 18px 14px; }
.evi__pdf .pg { height: 6px; background: var(--line-2); border-radius: 2px; margin-bottom: 7px; }
.evi__pdf .pg.is-hit { background: rgba(241, 84, 18, .5); }
.evi__pdf .pg.w1 { width: 92%; } .evi__pdf .pg.w2 { width: 78%; } .evi__pdf .pg.w3 { width: 86%; }

/* the two figures that disagree, and the gap between them */
.gap2 { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(18px, 3vw, 44px); align-items: center; margin-top: 44px; }
.gap2__side { text-align: center; }
.gap2__n { font-family: var(--disp); font-weight: 300; font-size: clamp(30px, 3.6vw, 48px); letter-spacing: -.04em; color: var(--ink); font-feature-settings: "tnum" 1; }
.gap2__mid { text-align: center; }
.gap2__mid .d { font-family: var(--disp); font-weight: 300; font-size: clamp(26px, 3vw, 40px); color: var(--accent); letter-spacing: -.04em; font-feature-settings: "tnum" 1; }

/* ---- the four figures -------------------------------------------------- */

.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.tile { padding: 24px; }
.tile__n { font-family: var(--disp); font-weight: 300; font-size: clamp(26px, 2.6vw, 36px); letter-spacing: -.04em; color: var(--ink); margin: 14px 0 0; font-feature-settings: "tnum" 1; white-space: nowrap; }
.tile__n.is-accent { color: var(--accent); }
.tile__bar { height: 3px; border-radius: 2px; background: var(--line-2); margin-top: 16px; overflow: hidden; }
.tile__bar i { display: block; height: 3px; background: var(--muted); border-radius: 2px; transform-origin: left; }
.tile__bar i.is-accent { background: var(--accent); }
.tile__c { font-size: 13.5px; color: var(--muted); margin-top: 12px; }

/* ---- the ledger -------------------------------------------------------- */

/* A record, set like one: mono figures on one right edge, one hairline a row,
   and the only colour on the line that is being questioned. */
.led { width: 100%; border-collapse: collapse; }
.led th {
  text-align: left; font-family: var(--mono); font-weight: 400; font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  padding: 0 0 14px; border-bottom: 1px solid var(--line);
}
.led th.r, .led td.r { text-align: right; }
.led td { padding: 15px 0; border-bottom: 1px solid var(--line-2); font-size: 15.5px; color: var(--ink); vertical-align: baseline; }
.led td.r { font-family: var(--mono); font-size: 14.5px; font-feature-settings: "tnum" 1; }
.led td .sub { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; }
/* The base the deductions come out of. Not a deduction itself, so it sits
   above the rule rather than inside the column, and takes no accent. */
.led tr.is-base td { border-bottom: 1px solid var(--ink); padding-bottom: 15px; }
.led tr.is-base td.r { font-size: 16px; }
/* Each deduction type carries its own colour, as a swatch on the line. The
   same --c drives that type's segment in the share bar and its column in the
   chart, so the three read as one picture instead of three. */
.led tr.cat td:first-child { position: relative; padding-left: 19px; }
.led tr.cat td:first-child::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 9px; height: 9px; border-radius: 2px; background: var(--c, var(--line));
}
.led tr.is-claim td, .led tr.is-claim td.r { color: var(--accent); }
.led tr.is-total td { border-bottom: 0; border-top: 1px solid var(--ink); padding-top: 22px; font-size: 19px; }
.led tr.is-total td.r { font-family: var(--disp); font-weight: 300; font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -.04em; }
.led__foot { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 18px; }

/* the share of every rupee the platform kept */
.share { margin-top: 40px; }
.share__track { position: relative; height: 6px; border-radius: 3px; background: var(--line-2); overflow: hidden; }
.share__fill {
  position: absolute; inset: 0 auto 0 0; background: var(--accent);
  border-radius: 3px; transform-origin: left;
  display: flex; overflow: hidden;
}
/* One segment per deduction type. --w is that type's share OF THE FILL, so the
   five still add to 100% while the fill itself animates open. */
.share__fill .seg { flex: 0 0 var(--w); background: var(--c); }
.share__fill .seg + .seg { box-shadow: inset 1px 0 0 rgba(255,255,255,.55); }
/* Six items on ONE line. A second line here costs the merge section its
   one-screen fit, which is worth more than a roomier legend. */
.share__legend { display: flex; justify-content: space-between; gap: 6px 10px; margin-top: 11px; flex-wrap: wrap; }
.share__legend .key {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.share__legend .lbl { font-size: 9.5px; letter-spacing: .06em; white-space: nowrap; }
.share__legend .key::before {
  content: ""; width: 8px; height: 8px; border-radius: 2px;
  background: var(--c); flex: 0 0 auto;
}

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

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step { padding: 28px 26px 30px; }
.step__n { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--accent); }
.step h3 { margin: 18px 0 10px; font-size: 21px; }

/* ---- sawaal ------------------------------------------------------------ */

.qa { border-top: 1px solid var(--line); }
.qa__i { border-bottom: 1px solid var(--line-2); padding: 26px 0; display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(20px, 4vw, 60px); }
.qa__q { font-size: 18px; letter-spacing: -.015em; color: var(--ink); }
.qa__a { font-size: 15.5px; color: var(--body); }

/* ---- closing ----------------------------------------------------------- */

.close__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: clamp(30px, 5vw, 72px); align-items: end; }
.limits { margin-top: clamp(48px, 6vw, 80px); padding-top: 26px; border-top: 1px solid rgba(237, 239, 239, .16); }
.limits p { font-size: 13.5px; line-height: 1.7; max-width: 70ch; }
.foot { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 26px 0 12px; border-top: 1px solid var(--line); }
/* who operates the page. Same label register as the line above it. */
.foot__legal { display: flex; justify-content: space-between; gap: 6px 20px; flex-wrap: wrap; padding-bottom: 34px; }
.foot__legal b { font-weight: 500; color: var(--body); }

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

@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) 360px; }
  .eviD { grid-template-columns: 1fr 1fr; }
  .eviD > :last-child { grid-column: 1 / -1; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero h1 { max-width: none; }
  .up { margin-top: 8px; }
  .eviD { grid-template-columns: minmax(0, 1fr); }
  .eviD > :last-child { grid-column: auto; }
  .gap2 { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .tiles { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .tile { padding: 18px; }
  .steps, .close__grid { grid-template-columns: minmax(0, 1fr); }
  .qa__i { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .led td { font-size: 14.5px; }
  .led td .sub { font-size: 12.5px; }
  .foot, .foot__legal { flex-direction: column; gap: 8px; }
}