/* Hisab Time: hisabtime.com landing page.
   "Ledger Luxe, White Edition". Self-hosted fonts, no external requests.
   Motion uses transform and opacity only and respects prefers-reduced-motion. */

/* ---------- fonts ---------- */
/* Latin files carry the text. The rupee sign sits in the latin-ext files, so it
   gets its own one-glyph subsets (about 1.5 KB each) instead of pulling the
   80 KB latin-ext pair onto the first screen for a single character. */
@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-latin-opsz-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-rupee-opsz-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+20B9;
}
@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-latin-opsz-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/fonts/plus-jakarta-sans-rupee-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+20B9;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/fonts/plus-jakarta-sans-latin-wght-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Metric-matched fallbacks: until the web fonts arrive (slow networks), Georgia
   and Arial are scaled to the same average width and vertical metrics, so the
   swap does not reflow the headings. Measured with fontTools against the text
   of this page: Fraunces at wght 480 / opsz 144 (the headings), Plus Jakarta
   Sans at 400 and 700. */
@font-face {
  font-family: "Fraunces Fallback";
  src: local("Georgia");
  font-weight: 100 900;
  font-style: normal;
  size-adjust: 86.5%;
  ascent-override: 113.1%;
  descent-override: 29.5%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Fraunces Fallback";
  src: local("Georgia Italic"), local("Georgia-Italic");
  font-weight: 100 900;
  font-style: italic;
  size-adjust: 81%;
  ascent-override: 120.8%;
  descent-override: 31.5%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Jakarta Fallback";
  src: local("Arial"), local("ArialMT");
  font-weight: 200 549;
  font-style: normal;
  size-adjust: 103.6%;
  ascent-override: 100.2%;
  descent-override: 21.4%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Jakarta Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 550 800;
  font-style: normal;
  size-adjust: 100%;
  ascent-override: 103.9%;
  descent-override: 22.2%;
  line-gap-override: 0%;
}

/* ---------- tokens ---------- */
:root {
  /* warm cream, the ground of the brand board: emerald and gold sit on it, not on blue-grey */
  --canvas: #f8f6f1;
  --paper: #f5f1e8;
  --card: #ffffff;
  --line: #e9e5dc;
  --line-2: #f1ede5;
  --line-hi: #d9d3c6;
  --ink: #161a2b;
  --ink-2: #41465a;
  --muted: #737889;      /* large or decorative text only */
  --muted-aa: #626779;   /* small secondary text, AA on canvas and white */
  --faint: #a7abb8;
  --em: #0b7a55;
  --em-2: #0f9f6e;
  --em-hi: #14a072;
  --em-deep: #064a33;
  --glow: #34d399;
  --tint: #e6f5ee;
  --ruby: #e0475c;
  --amber: #d98a06;
  --sapphire: #2f6fe0;
  --amethyst: #8a5cf0;
  /* gold is the "settled" colour, kept for settled moments only: the kicker grain,
     the ticks, the carousel progress, focus rings on ink. Shapes only: gold is never
     small text on a light ground (it would fail AA). */
  --gold: #f5c45a;
  --gold-tick: #e3b04b;
  --gold-deep: #b8862a;
  --ivory: #fbf6ea;
  --night: #11141f;
  /* the ink bands (Cash Radar, privacy): one recipe */
  --ink-band:
    radial-gradient(50% 160px at 50% 0, rgba(52, 211, 153, 0.18), rgba(52, 211, 153, 0)),
    radial-gradient(60% 50% at 56% 62%, rgba(52, 211, 153, 0.15), rgba(52, 211, 153, 0) 70%),
    radial-gradient(45% 35% at 50% 0%, rgba(251, 246, 234, 0.05), rgba(251, 246, 234, 0) 70%),
    linear-gradient(180deg, #161a2b 0%, #0e1119 100%);

  --serif: "Fraunces", "Fraunces Fallback", Georgia, "Times New Roman", serif;
  --sans: "Plus Jakarta Sans", "Jakarta Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --shell: 1240px;
  --gutter: clamp(20px, 4vw, 48px);
  --nav-h: 72px;

  --sh-1: 0 1px 2px rgba(22, 26, 43, 0.04), 0 1px 1px rgba(22, 26, 43, 0.02);
  --sh-2: 0 1px 0 rgba(22, 26, 43, 0.03), 0 14px 34px -20px rgba(22, 26, 43, 0.24);
  --sh-3: 0 2px 4px rgba(22, 26, 43, 0.04), 0 28px 56px -28px rgba(22, 26, 43, 0.34), 0 60px 110px -60px rgba(22, 26, 43, 0.22);
  /* one recipe for every small card that floats over a screen, like the hero
     invoice total */
  --sh-float: 0 1px 2px rgba(22, 26, 43, 0.06), 0 24px 48px -24px rgba(22, 26, 43, 0.38);
  /* devices: the metal rings, then a near contact shadow, a mid shadow and an
     emerald-tinted ambient, so phones sit in the page's own light, not in grey */
  --dev-rings: 0 0 0 0.4cqw #41465c, 0 0 0 0.7cqw #0b0d15, 0 -1px 0 0.7cqw rgba(255, 255, 255, 0.14);
  --dev-metal: linear-gradient(160deg, #3a3f52 0%, #0b0d14 40%, #10131e 74%, #262b3c 100%);
  /* lit from the top left: the shadows fall down and a little to the right */
  --dev-drop: 0 1px 1px rgba(22, 26, 43, 0.14), 2px 12px 24px -12px rgba(22, 26, 43, 0.28), 8px 50px 90px -36px rgba(6, 74, 51, 0.42), 14px 110px 150px -90px rgba(11, 122, 85, 0.38);
  --dev-glass: linear-gradient(112deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 30%, rgba(255, 255, 255, 0) 30.5%);

  /* four corner radii, nothing in between:
     r-1 buttons, icon tiles and small rows; r-2 floating cards and inset panels;
     r-3 screenshot frames; r-4 the big tiles and panels */
  --r-1: 12px;
  --r-2: 16px;
  --r-3: 24px;
  --r-4: 32px;

  /* the rounded ends of the two ink bands */
  --band-r: clamp(24px, 3vw, 40px);

  /* how far a floating piece may hang past the content edge, everywhere */
  --bleed: 24px;

  /* two lead sizes: section leads, and the shorter leads under the small headings */
  --lead-l: clamp(1.0625rem, 1rem + 0.28vw, 1.25rem);
  --lead-m: clamp(1.0625rem, 1rem + 0.14vw, 1.125rem);
}

/* ---------- base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img,
svg {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
a {
  color: var(--em);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(11, 122, 85, 0.35);
  text-underline-offset: 3px;
  transition: color 0.2s var(--ease), text-decoration-color 0.2s var(--ease);
}
a:hover {
  color: #075c40;
  text-decoration-color: currentColor;
}
:focus-visible {
  outline: 2px solid var(--em);
  outline-offset: 3px;
  border-radius: 8px;
}
button {
  font: inherit;
  color: inherit;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1,
h2,
h3 {
  line-height: 1.2;
}
/* no single word left alone on a last line, anywhere in running text */
p,
li,
dd {
  text-wrap: pretty;
}
strong {
  font-weight: 700;
  color: var(--ink);
}
i {
  font-style: normal; /* <i> is only used for decorative shapes here */
}
section[id] {
  scroll-margin-top: calc(var(--nav-h) + 8px);
}
::selection {
  background: rgba(52, 211, 153, 0.28);
  color: var(--ink);
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: fixed;
  left: 16px;
  top: 12px;
  transform: translateY(calc(-100% - 40px)); /* off screen and invisible until focused */
  opacity: 0;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: var(--r-1);
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
.skip:focus {
  transform: none;
  opacity: 1;
  color: #fff;
}
.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.i {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nowrap {
  white-space: nowrap;
}

/* ---------- wordmark: Logo B, outlined from the brand master ----------
   "hisab" in Plus Jakarta Sans 800, "time" in Fraunces italic. The paths live in
   the #ht-wordmark symbol and take their colours from --wm-a and --wm-b: ink and
   emerald on light, ivory and gold on ink. Registered, so the swap can fade. */
@property --wm-a {
  syntax: "<color>";
  inherits: true;
  initial-value: #161a2b;
}
@property --wm-b {
  syntax: "<color>";
  inherits: true;
  initial-value: #0b7a55;
}

/* ---------- type ---------- */
/* Fraunces display per BRAND.md (opsz 144). Never tighter than -0.025em.
   The emerald italic is reserved for four places: the hero, the Cash Radar
   heading, the final call to action and the footer line. Elsewhere an <em>
   stays italic but keeps the ink colour. */
.display {
  font-family: var(--serif);
  font-weight: 500;
  font-variation-settings: "opsz" 144;
  font-size: clamp(3rem, 1rem + 5vw, 6.2rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.display em {
  font-style: italic;
  font-weight: 470;
  letter-spacing: -0.012em;
  color: var(--em);
}
.h2 {
  font-family: var(--serif);
  font-weight: 470;
  font-variation-settings: "opsz" 144;
  font-size: clamp(2.1rem, 1.25rem + 2.4vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.h2 em {
  font-style: italic;
  font-weight: 440;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.h2--xl {
  font-size: clamp(2.5rem, 1.1rem + 4.1vw, 5rem);
  line-height: 1.02;
}
.h2--sm {
  font-size: clamp(1.9rem, 1.3rem + 1.5vw, 2.75rem);
  line-height: 1.08;
}
.lead {
  font-size: var(--lead-l);
  line-height: 1.62;
  color: var(--ink-2);
  text-wrap: pretty;
}
/* under the small headings the lead steps down with them */
.h2--sm ~ .lead,
.h2--sm ~ .head__lead {
  font-size: var(--lead-m);
}
.phone-only {
  display: none;
}

/* Folio: a ledger page number that opens each product chapter. */
.folio {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  font-family: var(--serif);
  font-variation-settings: "opsz" 24;
  color: var(--ink-2);
  line-height: 1;
}
.folio__no {
  font-size: 15px;
  font-weight: 560;
  letter-spacing: 0.04em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink);
}
.folio__rule {
  width: 44px;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
}
.folio__name {
  font-size: 18px;
  font-style: italic;
  font-weight: 430;
  letter-spacing: -0.005em;
}
.folio--ink {
  color: #c9cdd9;
}
.folio--ink .folio__no {
  color: #f6f3ea;
}
/* the gold grain marks "now": the hero kicker and the Cash Radar folio, nowhere else */
.grain {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(245, 196, 90, 0.16);
}

/* ---------- buttons ---------- */
.btn {
  --h: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: var(--h);
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--r-1);
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background-color 0.25s, color 0.25s, border-color 0.25s;
}
.btn .i {
  width: 18px;
  height: 18px;
  transition: transform 0.35s var(--ease);
}
.btn:hover .i {
  transform: translateX(3px);
}
.btn:active {
  transform: translateY(0) scale(0.985);
}
.btn--primary:active,
.btn--primary:hover:active {
  transform: scale(0.98);
  transition-duration: 0.12s;
}
.btn--primary {
  color: #fff;
  background: linear-gradient(180deg, #0e8560, #0b7a55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 1px 2px rgba(6, 74, 51, 0.3), 0 12px 24px -12px rgba(11, 122, 85, 0.7);
}
.btn--primary:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 2px 4px rgba(6, 74, 51, 0.28), 0 18px 32px -14px rgba(11, 122, 85, 0.78);
}
.btn--ghost {
  color: var(--ink);
  background: #fff;
  border-color: var(--line);
  box-shadow: var(--sh-1);
}
.btn--ghost:hover {
  color: var(--ink);
  border-color: var(--line-hi);
  transform: translateY(-1px);
  box-shadow: var(--sh-2);
}
.btn--ivory {
  color: var(--em-deep);
  background: var(--ivory);
  box-shadow: inset 0 1px 0 #fff, 0 16px 30px -16px rgba(2, 31, 21, 0.7);
}
.btn--ivory:hover {
  color: var(--em-deep);
  background: #fff;
  transform: translateY(-1px);
}
.btn--lg {
  --h: 56px;
  padding: 0 28px;
  font-size: 16.5px;
}
.btn--sm {
  --h: 40px;
  padding: 0 16px;
  font-size: 14px;
}
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--sh-1);
  transition: transform 0.3s var(--ease), border-color 0.2s, box-shadow 0.3s var(--ease);
}
.icon-btn:hover {
  border-color: var(--line-hi);
  transform: translateY(-1px);
  box-shadow: var(--sh-2);
}
.icon-btn--quiet {
  background: transparent;
  box-shadow: none;
}

/* ---------- nav ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.nav.is-scrolled,
.nav.is-open,
.no-js .nav {
  background: rgba(248, 246, 241, 0.9);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
  backdrop-filter: saturate(1.6) blur(18px);
  border-bottom-color: rgba(233, 229, 220, 0.9);
}
/* with the menu open, the bar and the sheet below it are one solid surface */
.nav.is-open {
  background: var(--canvas);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* over the ink Cash Radar band the bar turns ink too, never a muddy grey */
.nav.nav--ink:not(.is-open) {
  background: rgba(17, 20, 31, 0.78);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.nav--ink:not(.is-open) .brand {
  --wm-a: var(--ivory);
  --wm-b: var(--gold);
}
.nav--ink:not(.is-open) .nav__links a {
  color: #d9dce6;
}
.nav--ink:not(.is-open) .nav__links a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
}
.nav--ink:not(.is-open) .nav__links a.is-current {
  color: #fff;
}
.nav--ink:not(.is-open) .nav__links::after {
  background: var(--gold);
}
.nav--ink:not(.is-open) .nav__toggle {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  color: #f6f3ea;
}
.nav--ink:not(.is-open) :focus-visible {
  outline-color: var(--gold);
}
.nav .brand,
.nav__toggle {
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease), border-color 0.2s var(--ease), --wm-a 0.2s var(--ease), --wm-b 0.2s var(--ease);
}
.nav__bar {
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--nav-h);
}
/* the B lockup: tile, then the wordmark centred on its x-height (master proportions:
   tile 1.72 x the ascender, gap 0.22 x the tile) */
.brand {
  --wm-a: var(--ink);
  --wm-b: var(--em);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  min-height: 44px; /* a full size tap target around the 34px mark */
  color: var(--ink);
  text-decoration: none;
  border-radius: 10px;
}
.brand:hover {
  color: var(--ink);
}
.brand__mark {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 24%;
  box-shadow: 0 6px 12px -4px rgba(6, 74, 51, 0.34), 0 1px 2px rgba(6, 74, 51, 0.18);
}
.brand__word {
  display: block;
  width: 116px;
  height: 24.7px;
  flex: none;
  overflow: visible;
}
.nav__menu {
  flex: 1;
  display: flex;
  justify-content: center;
}
.nav__links {
  position: relative;
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* one gold dot for the whole bar: it slides to the section on screen (site.js sets
   --dot-x, the centre of the current link, and --dot-o) */
.nav__links::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 1px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--gold-deep);
  opacity: var(--dot-o, 0);
  transform: translateX(var(--dot-x, 0px));
  transition: transform 0.55s var(--ease), opacity 0.3s var(--ease), background-color 0.2s var(--ease);
  pointer-events: none;
}
.nav__links.no-anim::after {
  transition: none;
}
.nav__links a {
  position: relative;
  display: block;
  padding: 8px 14px;
  white-space: nowrap;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.nav__links a:hover {
  color: var(--ink);
  background: rgba(22, 26, 43, 0.045);
}
.nav__links a.is-current {
  color: var(--ink);
}
.nav__menu-cta {
  display: none;
}
.nav__cta-short {
  display: none;
}
.nav__end {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.nav__toggle {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-1);
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}
.nav__toggle .i--close {
  display: none;
}
.nav.is-open .nav__toggle .i--open {
  display: none;
}
.nav.is-open .nav__toggle .i--close {
  display: block;
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  padding-top: calc(var(--nav-h) + 24px);
  overflow-x: clip;
}
.hero__bg {
  position: absolute;
  inset: 0 0 -10% 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
}
.aurora {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}
.aurora--1 {
  left: 50%;
  top: 28%;
  width: 1180px;
  height: 900px;
  margin-left: -590px;
  background: radial-gradient(closest-side, rgba(52, 211, 153, 0.24), rgba(52, 211, 153, 0.07) 55%, rgba(52, 211, 153, 0) 100%);
}
.aurora--2 {
  left: -14%;
  top: -12%;
  width: 900px;
  height: 680px;
  background: radial-gradient(closest-side, rgba(15, 159, 110, 0.08), rgba(15, 159, 110, 0) 100%);
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 44px;
}
.hero__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* A ledger entry: the title is as wide as its longest line, each line sits on a
   hairline that draws in from the left, and the last line ends on the gold tick,
   the sahi mark of a settled entry. */
.hero__title {
  width: fit-content;
  max-width: 100%;
  margin-top: 8px;
  padding-bottom: 0.04em;
}
.hero__line,
.final__line {
  position: relative;
  display: block;
}
.hero__line::after,
.final__line::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--rule-b, 0.06em);
  height: 1px;
  background: var(--rule, rgba(22, 26, 43, 0.1));
  transform-origin: 0 50%;
  pointer-events: none;
}
.hero__line:nth-child(2)::after { --i: 1; }
.hero__line:nth-child(3)::after { --i: 2; }
.final__line:nth-child(2)::after { --i: 1; }
/* the entry closes on a full stop in the brand's gold: the settled mark, said
   quietly (the icon beside the phone carries the tick). It lands with the tick. */
.hero__stop {
  display: inline-block;
  margin-left: 0.01em;
  color: #dba43c;
  background: linear-gradient(180deg, #f0c766 10%, #c98f22 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transform-origin: 50% 80%;
}
/* the category, said plainly before the brand line */
.hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--em);
}
.hero__lead {
  max-width: 540px;
  margin-top: 18px;
  text-wrap: balance;
}
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 26px;
}
/* what the button does, said where the button is */
.hero__micro {
  flex: 1 0 100%;
  order: 3;
  margin-top: 2px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted-aa);
  text-wrap: balance;
}
/* the double "totals" rule under the call to action */
.hero__total {
  display: block;
  width: min(100%, 470px);
  height: 4px;
  margin-top: 30px;
  border-top: 1px solid rgba(22, 26, 43, 0.16);
  border-bottom: 1px solid rgba(22, 26, 43, 0.16);
}
.hero__note {
  max-width: 100%;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted-aa);
}
.hero__sep {
  margin: 0 0.3em;
  color: var(--faint);
}

/* scene: the phone leads, a real invoice total sits beside it */
.scene {
  position: relative;
  perspective: 2200px;
  perspective-origin: 50% 0%;
}
.scene__inner {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  max-width: 600px;
  margin: 0 auto;
  padding-bottom: 12px;
}
.scene__glow {
  position: absolute;
  inset: 8% -14% -4%;
  z-index: -1;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(15, 159, 110, 0.2), rgba(15, 159, 110, 0) 100%),
    radial-gradient(35% 28% at 72% 18%, rgba(245, 196, 90, 0.16), rgba(245, 196, 90, 0));
}
/* where the phone meets the ground: a soft, tight contact shadow under it */
.scene__inner::after {
  content: "";
  position: absolute;
  left: var(--contact-l, 18%);
  right: var(--contact-r, 34%);
  bottom: -6px;
  z-index: 0;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(22, 26, 43, 0.34), rgba(22, 26, 43, 0));
  pointer-events: none;
}
.phone.scene__phone {
  z-index: 2;
  width: clamp(196px, 56vw, 300px);
  flex: none;
  transform-origin: 50% 100%;
  transform: rotateX(calc(var(--tilt, 0) * 1deg));
  translate: calc(var(--mx, 0) * -6px) calc(var(--my, 0) * -4px);
  will-change: transform;
}
.ui-card.scene__card {
  z-index: 3;
  width: clamp(130px, 37vw, 236px);
  flex: none;
  margin: 27% 0 0 -12px;
  border-radius: var(--r-2);
  background: #fff;
  box-shadow: var(--sh-float);
  translate: calc(var(--mx, 0) * 14px) calc(var(--my, 0) * 9px);
}
/* app screens load onto plain paper and fade in once decoded (a blurred preview of
   an interface reads as a broken render); site.js marks the ones still loading */
img.is-pending {
  opacity: 0;
}
img.is-shown {
  transition: opacity 0.25s var(--ease);
}

/* ---------- UI cards: real app screens, cropped, no device chrome ---------- */
.ui-card {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-3);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(22, 26, 43, 0.05), 0 30px 60px -32px rgba(22, 26, 43, 0.38), 0 70px 120px -70px rgba(22, 26, 43, 0.3);
}
.ui-card img {
  width: 100%;
  height: auto;
}
.ui-card--night {
  background: #f6f3ea;
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.4), 0 40px 90px -40px rgba(0, 0, 0, 0.85), 0 30px 120px -50px rgba(52, 211, 153, 0.32);
}

/* ---------- phone frame ---------- */
.phone {
  position: relative;
  margin: 0;
  container-type: inline-size;
}
/* side keys, cut from the same metal as the rim */
.phone::before,
.phone::after {
  content: "";
  position: absolute;
  right: -1.45%;
  width: 1.45%;
  border-radius: 0 0.9cqw 0.9cqw 0;
  background: linear-gradient(90deg, #0b0d15 0%, #3b4054 38%, #4a5068 52%, #23283a 82%, #0b0d15 100%);
}
.phone::before {
  top: 21%;
  height: 7%;
}
.phone::after {
  top: 31%;
  height: 12%;
}
/* one device language for every phone on the page: a dark bezel, a lighter
   metal rim and a dark outer edge, with a faint sweep of glass on top */
/* the bezel is cut from brushed metal: lit at the top left, falling to near black */
.phone__screen {
  position: relative;
  overflow: hidden;
  border: 3.3cqw solid transparent;
  border-radius: 15.5cqw;
  /* the paper shows while a lazy screenshot decodes, never a white flash */
  background: linear-gradient(var(--paper), var(--paper)) padding-box, var(--dev-metal) border-box;
  box-shadow: var(--dev-rings), var(--dev-drop);
}
/* glass: one hard-edged reflection across the upper left, like a lit cover glass */
.phone__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  pointer-events: none;
  background: var(--dev-glass);
  /* where the glass meets the bezel: a hairline, brighter along the top */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.phone__screen > img {
  width: 100%;
}
.phone__status {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3.4cqw 7.5cqw 1.6cqw;
  background: #fff;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 4.3cqw;
  font-weight: 700;
  line-height: 1;
}
.phone__cam {
  position: absolute;
  left: 50%;
  top: 2.4cqw;
  width: 4.6cqw;
  height: 4.6cqw;
  margin-left: -2.3cqw;
  border-radius: 50%;
  background: #090b12;
  box-shadow: inset 0 0 0 0.9cqw #1b1f2d;
}
.phone__sys {
  display: inline-flex;
  align-items: center;
  gap: 1cqw;
}
.phone__sys i {
  display: block;
  width: 1cqw;
  border-radius: 0.4cqw;
  background: currentColor;
}
.phone__sys i:first-child {
  height: 1.8cqw;
  opacity: 0.55;
}
.phone__sys i:nth-child(2) {
  height: 2.8cqw;
}
.phone__sys b {
  display: block;
  width: 5.2cqw;
  height: 2.6cqw;
  margin-left: 1cqw;
  border-radius: 0.8cqw;
  border: 0.45cqw solid currentColor;
  background: linear-gradient(90deg, currentColor 70%, transparent 70%);
  background-clip: content-box;
  padding: 0.3cqw;
}

/* ---------- sections and heads ---------- */
.section {
  position: relative;
  padding-block: clamp(56px, 4.8vw, 80px);
}
.head {
  margin-bottom: clamp(32px, 3.6vw, 52px);
}
.head--center {
  max-width: 880px;
  margin-inline: auto;
  text-align: center;
}
/* a lead is a measure, not a block: about 40 characters a line beside a heading
   (Jakarta's zero is wide, so 28ch), a little more under a centred one */
.head__lead {
  max-width: 28ch;
  font-size: clamp(1.0625rem, 0.98rem + 0.3vw, 1.1875rem);
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}
.head--center .head__lead {
  max-width: 38ch;
  margin: 24px auto 0;
  text-wrap: balance;
}

/* ---------- templates carousel ---------- */
/* invoice designs sit on warm paper, faded in and out over 120px */
.templates {
  overflow-x: clip;
  padding-top: clamp(64px, 6vw, 104px);
  padding-bottom: 8px;
  background: linear-gradient(180deg, var(--canvas) 0, var(--paper) 120px, var(--paper) calc(100% - 120px), var(--canvas) 100%);
}
.carousel {
  position: relative;
}
/* The side fade mask clips to the border box, so the stage carries 90px of
   extra bottom padding (and a matching negative margin) for the shadows and
   the glow to fade out inside it, with no hard seam. */
.carousel__stage {
  --card-w: 344px;
  position: relative;
  height: calc(var(--card-w) * 1.4135 + 162px);
  padding-bottom: 90px;
  margin-bottom: -90px;
  perspective: 1800px;
  perspective-origin: 50% 40%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.carousel__stage::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 40px;
  width: 1100px;
  margin-left: -550px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(52, 211, 153, 0.18), rgba(52, 211, 153, 0) 100%);
  pointer-events: none;
}
.slide {
  margin: 0;
}
.slide img {
  width: 100%;
  border-radius: 6px;
  background-color: #fff; /* not the shorthand: the blurred placeholder sits in background-image */
  box-shadow: 0 0 0 1px rgba(22, 26, 43, 0.06), 0 2px 4px rgba(22, 26, 43, 0.05), 0 30px 60px -30px rgba(22, 26, 43, 0.4);
  user-select: none;
  -webkit-user-drag: none;
}
.js .slide {
  position: absolute;
  top: 28px;
  left: 50%;
  width: var(--card-w);
  margin-left: calc(var(--card-w) / -2);
  z-index: var(--zi, 1);
  opacity: var(--op, 0);
  transform: translate3d(var(--x, 0px), 0, var(--z, 0px)) rotateY(var(--r, 0deg)) scale(var(--s, 1));
  transform-origin: 50% 50%;
  transition: transform 0.95s var(--ease), opacity 0.75s var(--ease);
  cursor: pointer;
  will-change: transform;
}
/* side designs stay solid paper and turn away into shade: darker toward their
   outer edge (site.js sets the side and --dim, at most 0.5), never a grey veil */
.js .slide::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: linear-gradient(var(--shade-dir, 90deg), rgba(22, 26, 43, 0), rgba(22, 26, 43, 0.35));
  opacity: calc(var(--dim, 0) * 2);
  transition: opacity 0.75s var(--ease);
  pointer-events: none;
}
/* each design stands on the floor: a soft contact shadow, strongest under the front one */
.js .slide::before {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: -26px;
  z-index: -1;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(22, 26, 43, 0.26), rgba(22, 26, 43, 0));
  opacity: calc(1 - var(--dim, 0) * 1.4);
  transition: opacity 0.75s var(--ease);
  pointer-events: none;
}
.js .slide.is-active {
  cursor: default;
}
.js .slide.is-active img {
  box-shadow: 0 0 0 1px rgba(22, 26, 43, 0.06), 0 2px 6px rgba(22, 26, 43, 0.06), 0 50px 80px -40px rgba(22, 26, 43, 0.45);
}
.js .slide.is-hidden {
  pointer-events: none;
}
.js .slide.no-anim {
  transition: none;
}
/* the active design opens at full size; a quiet hint says so */
.slide__zoom {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  cursor: inherit;
}
.slide.is-active .slide__zoom {
  cursor: zoom-in;
}
.slide__hint {
  position: absolute;
  left: 50%;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px 8px 11px;
  border-radius: 999px;
  background: rgba(22, 26, 43, 0.86);
  color: #f6f3ea;
  font-size: 13px;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 6px);
  transition: opacity 0.3s var(--ease), transform 0.4s var(--ease);
  pointer-events: none;
}
.slide__hint .i {
  width: 15px;
  height: 15px;
}
.slide.is-active .slide__zoom:hover .slide__hint,
.slide.is-active .slide__zoom:focus-visible .slide__hint {
  opacity: 1;
  transform: translate(-50%, 0);
}
.slide__zoom:focus-visible {
  outline-offset: 4px;
}
.carousel__ui {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-top: 28px;
}
/* with a mouse, the six named tabs are the whole control: hovering or focusing the
   carousel pauses it, so arrows and a pause button would only repeat them */
@media (min-width: 701px) and (hover: hover) and (pointer: fine) {
  .carousel__controls [data-prev],
  .carousel__controls [data-next] {
    display: none;
  }
  /* the pause button stays for keyboards and screen readers, shown when focused */
  .carousel__controls [data-toggle]:not(:focus-visible) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    border: 0;
    padding: 0;
  }
}
.carousel__caption {
  min-width: 0;
}
/* the caption cross-fades while the cards glide, and always reserves two
   lines, so the controls never jump */
.carousel__caption > p {
  transition: opacity 0.32s var(--ease), transform 0.32s var(--ease);
}
.carousel__caption.is-swap > p {
  opacity: 0;
  transform: translateY(6px);
  transition-duration: 0.18s;
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.carousel__caption.is-swap > .carousel__desc {
  transition-delay: 0.02s;
}
.carousel__name {
  font-family: var(--serif);
  font-variation-settings: "opsz" 144;
  font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem);
  font-weight: 430;
  font-style: italic;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.1;
}
.carousel__desc {
  max-width: 44ch;
  min-height: 3.2em;
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted-aa);
  text-wrap: pretty;
}

/* full size view of one design */
.zoom {
  width: min(960px, calc(100vw - 32px));
  max-width: none;
  height: min(calc(100vh - 32px), 1180px);
  height: min(calc(100dvh - 32px), 1180px);
  max-height: none;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background: var(--canvas);
  color: var(--ink);
  box-shadow: 0 40px 100px -30px rgba(10, 12, 20, 0.55);
  overflow: hidden;
}
.zoom[open] {
  display: flex;
  flex-direction: column;
}
.zoom::backdrop {
  background: rgba(17, 20, 31, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.zoom__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px 14px 24px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.zoom__title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 14px;
  min-width: 0;
  font-family: var(--serif);
  font-size: 24px;
  font-style: italic;
  font-weight: 450;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.zoom__count {
  font-family: var(--sans);
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--muted-aa);
}
.zoom__actions {
  display: flex;
  gap: 8px;
  flex: none;
}
.zoom__close {
  margin-left: 6px;
}
.zoom__body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: clamp(14px, 3vw, 32px);
}
.zoom__body:focus-visible {
  outline-offset: -4px;
}
.zoom__img {
  width: 100%;
  max-width: 1200px;
  height: auto;
  margin: 0 auto;
  border-radius: 6px;
  background-color: #fff;
  background-size: 100% 100%;
  box-shadow: 0 0 0 1px rgba(22, 26, 43, 0.06), 0 24px 48px -28px rgba(22, 26, 43, 0.4);
}
/* phones only: one pill to switch between the whole page and 2x */
.zoom__tools {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  z-index: 2;
  display: none;
  justify-content: center;
  pointer-events: none;
}
.zoom__scale {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px 0 15px;
  border: 0;
  border-radius: 999px;
  background: rgba(22, 26, 43, 0.9);
  color: #f6f3ea;
  font-size: 14px;
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 10px 24px -10px rgba(10, 12, 20, 0.6);
}
.zoom__scale .i {
  width: 17px;
  height: 17px;
}
.zoom__scale:focus-visible {
  outline-color: var(--em);
}
@media (prefers-reduced-motion: no-preference) {
  .zoom[open] {
    animation: zoom-in 0.45s var(--ease);
  }
  .zoom[open]::backdrop {
    animation: fade-in 0.35s var(--ease);
  }
}
@keyframes zoom-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
}
.carousel__controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.carousel__dots {
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--line);
}
.dot-btn {
  position: relative;
  overflow: hidden;
  padding: 8px 13px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted-aa);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: color 0.2s, background-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.dot-btn:hover {
  color: var(--ink);
}
.dot-btn[aria-current="true"] {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(22, 26, 43, 0.08), 0 4px 10px -6px rgba(22, 26, 43, 0.25);
}
/* autoplay progress, in gold: the active tab fills, then the next design settles in */
.dot-btn__bar {
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold-tick);
  transform: scaleX(0);
  transform-origin: 0 50%;
  opacity: 0;
}
.dot-btn.is-running .dot-btn__bar {
  opacity: 1;
  animation: fill-bar var(--dur, 4200ms) linear forwards;
}
/* held (hover, focus, the full size view): the bar stops where it is */
[data-held] .dot-btn.is-running .dot-btn__bar {
  animation-play-state: paused;
}
[data-paused] .dot-btn.is-running .dot-btn__bar {
  animation: none;
  opacity: 0;
}
@keyframes fill-bar {
  to {
    transform: scaleX(1);
  }
}
[data-carousel] .i--play {
  display: none;
}
[data-carousel][data-paused] .i--play {
  display: block;
}
[data-carousel][data-paused] .i--pause {
  display: none;
}
.no-js .carousel__stage {
  display: flex;
  gap: 24px;
  height: auto;
  overflow-x: auto;
  margin-bottom: 0;
  padding: 24px var(--gutter) 48px;
  scroll-snap-type: x mandatory;
  -webkit-mask-image: none;
  mask-image: none;
}
.no-js .slide {
  flex: 0 0 300px;
  scroll-snap-align: center;
}
.no-js .carousel__controls,
.no-js .carousel__caption {
  display: none;
}

/* ---------- 01 cash radar (ink band, the signature) ---------- */
.radar {
  padding-block: clamp(72px, 6.5vw, 104px) clamp(60px, 5.4vw, 88px);
  overflow: hidden;
  isolation: isolate;
  background: var(--night);
  color: #b7bccb;
}
.radar__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink-band);
}
/* an ink band is a sheet laid on the paper, not a cut: rounded ends, with a
   hairline emerald rim where its edge catches the light */
.ink-band {
  border-radius: var(--band-r);
}
.ink-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(52, 211, 153, 0.22), inset 0 -1px 0 rgba(52, 211, 153, 0.1);
  pointer-events: none;
}
.radar__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, transparent 0 47px, rgba(255, 255, 255, 0.032) 47px 48px);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent 80%);
  mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent 80%);
}
.head--ink .h2 {
  color: #f6f3ea;
}
.head--ink .h2 em {
  color: var(--glow);
}
.head--ink .head__lead {
  color: #b7bccb;
}
.radar__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 196px) minmax(0, 1fr);
  align-items: center;
}
.phone--radar {
  z-index: 2;
}
/* on ink the rim needs one more hairline of light to separate it from the band */
.phone--radar .phone__screen {
  box-shadow: 0 0 0 0.4cqw #4a5068, 0 0 0 0.7cqw #05060a, 0 -1px 0 0.7cqw rgba(255, 255, 255, 0.2), 0 0 0 calc(0.7cqw + 1px) rgba(255, 255, 255, 0.08), 0 1px 1px rgba(0, 0, 0, 0.3), 0 12px 24px -12px rgba(0, 0, 0, 0.5), 0 50px 90px -36px rgba(0, 0, 0, 0.7), 0 110px 150px -90px rgba(52, 211, 153, 0.3);
}
/* The chart is drawn, not photographed: an inline SVG line and fill on an ivory
   mat, with every label in HTML, so it is sharp at any size and the header, the
   figures and the axes are on screen from the first frame. As the card arrives
   the line draws from today (0.9 s), the fill settles in under it (0.4 s), then
   the lowest point is called out. site.js redraws the path at the real size, lets
   a mouse read any day, and can flip one late invoice to on time. */
.radar__chart {
  margin-left: 22px;
  padding: 20px 24px 14px;
  border-radius: var(--r-3);
  isolation: isolate;
}
.cr {
  container-type: inline-size;
  color: var(--ink-2);
}
.cr__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 24px;
}
.cr__title {
  font-family: var(--serif);
  font-variation-settings: "opsz" 72;
  font-size: 19px;
  font-weight: 560;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.cr__sub {
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted-aa);
}
.cr__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 3px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--ink-2);
  white-space: nowrap;
}
.cr__legend li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.cr__k {
  display: block;
  flex: none;
}
.cr__k--line {
  width: 16px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #34d399, #0b7a55);
}
.cr__k--rcpt,
.cr__k--low {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--em-2);
}
.cr__k--low {
  border-color: var(--ink);
}
.cr__k--gst {
  width: 15px;
  height: 0;
  border-top: 2px dashed #d9921a;
}
/* the sum, as the app shows it: cash today + receipts - GST = day 60 */
.cr__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 16px 0 0;
  border: 1px solid rgba(22, 26, 43, 0.08);
  border-radius: var(--r-2);
  background: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 1px 0 #fff;
  overflow: hidden;
}
.cr__stat {
  position: relative;
  padding: 11px 16px 12px;
}
.cr__stat + .cr__stat {
  border-left: 1px solid rgba(22, 26, 43, 0.07);
}
.cr__stat + .cr__stat::before {
  position: absolute;
  left: 0;
  top: 50%;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  background: #fbf9f3;
  border: 1px solid rgba(22, 26, 43, 0.1);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: var(--muted-aa);
}
.cr__stat--plus::before { content: "+"; content: "+" / ""; }
.cr__stat--minus::before { content: "\2212"; content: "\2212" / ""; }
.cr__stat--eq::before { content: "="; content: "=" / ""; }
.cr__stat--eq {
  background: linear-gradient(180deg, rgba(52, 211, 153, 0.12), rgba(52, 211, 153, 0.05));
}
.cr__stat dt {
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted-aa);
}
.cr__stat dd {
  margin: 3px 0 0;
  font-family: var(--serif);
  font-variation-settings: "opsz" 72;
  font-size: 22px;
  font-weight: 560;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink);
}
.cr__stat dd.cr__v--em {
  color: var(--em);
}
.cr__stat dd.cr__v--gst {
  color: #94570a;
}
[data-cr-text] {
  transition: opacity 0.2s var(--ease);
}
.cr.is-swap [data-cr-text] {
  opacity: 0;
}

/* the plot: y labels, the plot itself, x labels; a 38px row above it holds the
   GST call-out and the what-if switch */
.cr__chart {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  grid-template-rows: 40px var(--plot-h, 212px) 26px;
  margin-top: 6px;
}
.cr__flip-row {
  grid-area: 1 / 2;
  display: flex;
  align-items: center;
  min-width: 0;
}
.cr__y {
  grid-area: 2 / 1;
  position: relative;
}
.cr__y span {
  position: absolute;
  right: 10px;
  top: calc(var(--y) * 1%);
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 550;
  line-height: 1;
  white-space: nowrap;
  color: var(--muted-aa);
  font-variant-numeric: tabular-nums;
}
.cr__plot {
  grid-area: 2 / 2;
  position: relative;
}
.cr__x {
  grid-area: 3 / 2;
  position: relative;
}
.cr__x span {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: 9px;
  transform: translateX(-50%);
  font-size: 11.5px;
  font-weight: 550;
  line-height: 1;
  white-space: nowrap;
  color: var(--muted-aa);
}
.cr__x .cr__x-today {
  transform: none;
  font-weight: 750;
  color: var(--em);
}
.cr__grid i {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--y) * 1%);
  height: 0;
  border-top: 1px solid rgba(22, 26, 43, 0.06);
}
.cr__grid .cr__grid-0 {
  border-top: 1.5px dashed rgba(22, 26, 43, 0.16);
}
.cr__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.cr__line {
  stroke-width: 2.6px;
  stroke-linejoin: round;
  stroke-linecap: round;
}
/* the GST due date: a dashed amber rule from its call-out down to zero */
.cr__gst {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: -34px;
  bottom: 0;
  width: 0;
  border-left: 1.5px dashed rgba(217, 146, 26, 0.75);
}
.cr__gst-pill {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 11px 0 9px;
  border-radius: 999px;
  background: #fdf3dc;
  border: 1px solid #f0d49b;
  color: #8a5206;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  transform: translate(-50%, -2px);
  box-shadow: 0 6px 14px -10px rgba(138, 82, 6, 0.6);
}
.cr__gst-pill .i {
  width: 14px;
  height: 14px;
  stroke-width: 1.9;
}
.cr__gst-pill b {
  font-weight: 750;
}
.cr__gst-pill span {
  padding-left: 7px;
  border-left: 1px solid rgba(138, 82, 6, 0.25);
  font-weight: 550;
}
/* points on the line: today, the two receipts, the lowest day, day 60 */
.cr__dot,
.cr__tag {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  z-index: 2;
  pointer-events: none;
}
.cr__dot {
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: #fbf9f3;
  border: 2px solid var(--em-2);
}
.cr__dot--start {
  width: 13px;
  height: 13px;
  margin: -6.5px 0 0 -6.5px;
  border: 0;
  background: var(--em-2);
  box-shadow: 0 0 0 3px #f6f3ea, 0 0 0 5px rgba(15, 159, 110, 0.85), 0 0 0 10px rgba(15, 159, 110, 0.12);
}
.cr__dot--low {
  z-index: 3;
  width: 15px;
  height: 15px;
  margin: -7.5px 0 0 -7.5px;
  border: 3px solid var(--ink);
  background: #fff;
}
.cr__dot--end {
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border: 0;
  background: var(--em);
}
.cr__tag {
  white-space: nowrap;
  line-height: 1;
}
.cr__tag--today {
  margin-top: 15px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(230, 245, 238, 0.92);
  border: 1px solid rgba(15, 159, 110, 0.22);
  color: var(--em);
  font-size: 12px;
  font-weight: 550;
}
.cr__tag--today b {
  font-weight: 750;
}
.cr__tag--end {
  margin-top: -27px;
  transform: translateX(-100%);
  font-family: var(--serif);
  font-variation-settings: "opsz" 72;
  font-size: 15px;
  font-weight: 600;
  color: var(--em);
  font-variant-numeric: lining-nums;
}
.cr__tag--low {
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.32em;
  height: 26px;
  margin-top: 15px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 12.5px;
  font-weight: 750;
  letter-spacing: -0.005em;
  box-shadow: 0 8px 16px -8px rgba(22, 26, 43, 0.6);
  transform: translateX(-50%);
  transform-origin: 50% 0;
}
/* a mouse reads any day: a 1px crosshair, a dot on the line and the value
   (transform only; site.js turns this on for fine pointers without reduced motion) */
.cr__hair,
.cr__hdot,
.cr__tip {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s var(--ease);
}
.cr__hair {
  height: 100%;
  width: 1px;
  margin-left: -0.5px;
  background: rgba(22, 26, 43, 0.45);
}
.cr__hdot {
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 2.5px #fff, 0 2px 6px rgba(22, 26, 43, 0.35);
}
.cr__tip {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 8px 18px -8px rgba(22, 26, 43, 0.6);
}
.cr.is-scrub .cr__hair,
.cr.is-scrub .cr__hdot,
.cr.is-scrub .cr__tip {
  opacity: 1;
}
.cr.is-scrub .cr__plot {
  cursor: crosshair;
}
/* the what-if: the same switch as the app's Cash Radar list */
.cr__flip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 32px;
  padding: 4px 13px 4px 6px;
  border-radius: 999px;
  border: 1px solid rgba(22, 26, 43, 0.12);
  background: #fff;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(22, 26, 43, 0.06);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background-color 0.2s var(--ease);
}
.cr__flip[hidden] {
  display: none;
}
.cr__flip:hover {
  border-color: rgba(22, 26, 43, 0.22);
  box-shadow: 0 1px 2px rgba(22, 26, 43, 0.06), 0 8px 16px -10px rgba(22, 26, 43, 0.35);
}
.cr__sw {
  position: relative;
  width: 30px;
  height: 18px;
  flex: none;
  border-radius: 999px;
  background: #d9d5cb;
  transition: background-color 0.25s var(--ease);
}
.cr__sw::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(22, 26, 43, 0.3);
  transition: transform 0.3s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.cr__flip[aria-checked="true"] {
  border-color: rgba(11, 122, 85, 0.35);
  background: #f2faf6;
}
.cr__flip[aria-checked="true"] .cr__sw {
  background: var(--em-2);
}
.cr__flip[aria-checked="true"] .cr__sw::after {
  transform: translateX(12px);
}

/* narrow cards (tablets and phones): the app's portrait layout */
@container (max-width: 560px) {
  .cr__head {
    display: block;
  }
  .cr__legend {
    margin-top: 12px;
    gap: 6px 14px;
  }
  .cr__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cr__stat:nth-child(3) {
    border-left: 0;
  }
  .cr__stat:nth-child(n + 3) {
    border-top: 1px solid rgba(22, 26, 43, 0.07);
  }
  .cr__stat + .cr__stat::before {
    display: none;
  }
  .cr__stat dd {
    font-size: 21px;
  }
  .cr__chart {
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-rows: 40px var(--plot-h, 224px) 26px auto;
  }
  .cr__flip-row {
    grid-area: 4 / 1 / 5 / 3;
    justify-content: center;
    padding-top: 8px;
  }
  .cr__x .cr__x-minor,
  .cr__tag-long {
    display: none;
  }
  /* the lowest call-out sits to the right of its point, clear of today's label */
  .cr__tag--low {
    margin-left: -8px;
    transform: none;
    transform-origin: 0 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .js .cr:not(.is-drawn) .cr__line {
    stroke-dashoffset: 1;
  }
  .js .cr .cr__line {
    stroke-dasharray: 1 1;
  }
  .js .cr.is-drawn .cr__line {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.9s cubic-bezier(0.45, 0.05, 0.25, 1);
  }
  .js .cr:not(.is-drawn) .cr__area,
  .js .cr:not(.is-drawn) .cr__tag--end,
  .js .cr:not(.is-drawn) .cr__tag--today {
    opacity: 0;
  }
  .js .cr.is-drawn .cr__area {
    transition: opacity 0.4s var(--ease) 0.85s;
  }
  .js .cr.is-drawn .cr__tag--today {
    transition: opacity 0.35s var(--ease) 0.2s;
  }
  .js .cr.is-drawn .cr__tag--end {
    transition: opacity 0.35s var(--ease) 0.9s;
  }
  .js .cr:not(.is-drawn) .cr__dot {
    opacity: 0;
    transform: scale(0.3);
  }
  .js .cr.is-drawn .cr__dot {
    transition: opacity 0.15s var(--ease) var(--t, 0ms), transform 0.45s cubic-bezier(0.2, 1.7, 0.4, 1) var(--t, 0ms);
  }
  .js .cr:not(.is-drawn) .cr__tag--low {
    opacity: 0;
    scale: 0.7;
  }
  .js .cr.is-drawn .cr__tag--low {
    transition: opacity 0.25s var(--ease) 1.2s, scale 0.55s cubic-bezier(0.2, 1.6, 0.4, 1) 1.2s;
  }
  /* a flip that moves the lowest day gives its call-out a small pop */
  .cr.is-drawn .cr__tag--low.is-pop {
    animation: cr-pop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1);
  }
}
@keyframes cr-pop {
  40% {
    scale: 1.08;
  }
}
.radar__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 56px);
  margin: clamp(48px, 4.4vw, 72px) 0 0;
  padding: 0;
  list-style: none;
}
.radar__steps li {
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
/* side by side, the three headings share one row, so the paragraphs start level
   even when a heading wraps */
@media (min-width: 901px) {
  .radar__steps {
    grid-template-rows: auto auto auto;
    row-gap: 0;
  }
  .radar__steps li {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    align-content: start;
  }
  .radar__steps h3 {
    text-wrap: balance;
  }
}
.radar__n {
  display: block;
  font-family: var(--serif);
  font-variation-settings: "opsz" 144;
  font-size: 46px;
  font-style: italic;
  font-weight: 380;
  line-height: 1;
  color: var(--glow);
}
.radar__steps h3 {
  margin: 14px 0 8px;
  font-family: var(--serif);
  font-variation-settings: "opsz" 144;
  font-size: 26px;
  font-weight: 440;
  letter-spacing: 0;
  color: #f6f3ea;
}
.radar__steps p {
  font-size: 15.5px;
  line-height: 1.62;
  color: #b7bccb;
  text-wrap: pretty;
}
/* every line that works today carries the sahi mark: the B hand in gold, with a short
   first stroke (the h's leg in the logo) so it reads as a check at 14px */
:root {
  --tick-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='470 540 450 436'%3E%3Cg fill='%23e3b04b'%3E%3Cpath d='M486 829C478 818 480 803 491 795L553 750C564 742 579 744 587 755L676 878L677 963Q670 972 662 972L655 972C640 972 628 966 619 954Z'/%3E%3Cpath d='M670 702.19C670 706.16 671.97 706.83 674.4 703.69L788.18 556.5C798.31 543.4 817.39 540.66 830.8 550.4L901.99 602.13C915.39 611.87 918.36 630.63 908.63 644.03L677.04 962.79Q673.5 967 670 970.7Z'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- final cta: time on ink ---------- */
.final {
  padding-bottom: clamp(72px, 7vw, 112px);
}
.final__panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(52px, 5.5vw, 84px) clamp(24px, 5vw, 80px);
  border-radius: var(--r-4);
  background: linear-gradient(180deg, #161a2b 0%, var(--night) 100%);
  border: 1px solid #23283d;
  color: #c9cdd9;
  text-align: center;
  box-shadow: 0 2px 4px rgba(22, 26, 43, 0.12), 0 40px 80px -40px rgba(22, 26, 43, 0.6);
}
.final__glow {
  position: absolute;
  left: 50%;
  top: 10%;
  z-index: -1;
  width: 900px;
  height: 640px;
  margin-left: -450px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(52, 211, 153, 0.16), rgba(52, 211, 153, 0) 100%);
  pointer-events: none;
}
/* the B preloader glyph on ink: ivory h, gold tick, under its own warm light */
.final__mark {
  position: relative;
  width: 132px;
  margin: 0 auto 30px;
}
.final__mark::before {
  content: "";
  position: absolute;
  inset: -30% -40%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(245, 196, 90, 0.22), rgba(245, 196, 90, 0) 70%);
}
.final__title {
  --rule: rgba(251, 246, 234, 0.14);
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding-bottom: 0.04em;
  color: #f6f3ea;
}
/* "On time." in the brand's gold on ink, the same pairing as the wordmark */
.final__title em {
  background: linear-gradient(180deg, #f8d77f, #e0a93a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-right: 0.06em;
}
.final__lead {
  max-width: 540px;
  margin: 26px auto 0;
  font-size: var(--lead-l);
  line-height: 1.6;
  color: #c9cdd9;
}
.final__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 28px;
  margin-top: 38px;
}
/* the second way in, quieter than the button: buying Pro */
.final__alt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ivory);
  font-size: 15.5px;
  font-weight: 600;
  text-decoration-color: rgba(251, 246, 234, 0.4);
}
.final__alt:hover {
  color: #fff;
}
.final__alt .i {
  width: 18px;
  height: 18px;
}
.final .btn--ivory:focus-visible,
.final__alt:focus-visible {
  outline-color: var(--gold);
}

/* ---------- Logo B motion: "tick, tick, tick, sahi" ----------
   From the brand preloader: the gold tick ticks out from behind the h's leg like a
   second hand, in three steps with a small recoil, lands as the check, the h settles
   by 2.5% and a soft glint crosses the enamel. Transform and opacity only. It plays
   once and rests on the landed check; a hover plays it again. With reduced motion
   the landed mark simply sits still. Glyph units: the leg's outer edge is x 670,
   the hinge is at (670, 972) and the h settles about (335, 1000). */
.ht-icon,
.ht-tick {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.ht-icon__h,
.ht-tick__h {
  transform-box: view-box;
  transform-origin: 335px 1000px;
}
.ht-icon__hand,
.ht-tick__hand {
  transform-box: view-box;
  transform-origin: 670px 972px;
}
.ht-icon__glint,
.ht-tick__glint {
  transform-box: view-box;
  opacity: 0;
}

/* hero: the app icon stands beside the phone, over its bezel and never over the
   screen. Below 1200px it sits off the phone's upper right, above the invoice card;
   in the split hero it moves to the phone's left. Lit from the top left like the
   phones, so its shadow falls down and to the right with theirs. */
.scene__icon {
  position: absolute;
  z-index: 1;
  left: calc(100% - 2.6cqw);
  top: 2%;
  width: 32cqw;
  aspect-ratio: 1;
  border-radius: 23%;
  rotate: -3deg;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 1px 2px 3px rgba(4, 40, 27, 0.22), 6px 20px 32px -12px rgba(4, 40, 27, 0.5), 12px 50px 70px -40px rgba(11, 122, 85, 0.45);
  translate: calc(var(--mx, 0) * 20px) calc(var(--my, 0) * 14px);
}
/* the moment the tick lands, one glint crosses the phone glass too */
.phone__glint {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.phone__glint::before {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 46%;
  /* mint at the edges so it reads on the white screen, white at the core for the colour */
  background: linear-gradient(90deg, rgba(52, 211, 153, 0), rgba(52, 211, 153, 0.16) 32%, rgba(255, 255, 255, 0.75) 50%, rgba(52, 211, 153, 0.16) 68%, rgba(52, 211, 153, 0));
  transform: translateX(-120%) rotate(18deg);
  opacity: 0;
}

/* The first 1.4 s: the headline is there from the first frame and only settles;
   the phone rises in (0.15 to 0.65 s) on a growing contact shadow, the invoice
   total slides in from the right (0.45 s), the icon drops in (0.6 s), and the
   tick lands at 1.2 s with one glint across the icon and the phone glass. */
@media (prefers-reduced-motion: no-preference) {
  .js .scene__phone {
    animation: phone-in 0.5s var(--ease) 0.15s backwards;
  }
  .js .scene__inner::after {
    animation: contact-in 0.5s var(--ease) 0.15s backwards;
  }
  .js .scene__glow {
    animation: fade-in 0.6s var(--ease) 0.1s backwards;
  }
  .js .scene__card {
    animation: card-in 0.5s var(--ease) 0.45s backwards;
  }
  .js .scene__icon {
    animation: icon-in 0.45s cubic-bezier(0.2, 1.25, 0.4, 1) 0.6s backwards;
  }
  .js .scene__icon .ht-icon__hand {
    animation: ht-hand 0.55s linear 0.65s both;
  }
  .js .hero__stop {
    animation: stop-in 0.4s cubic-bezier(0.2, 1.6, 0.4, 1) 1.05s backwards;
  }
  .js .scene__icon .ht-icon__h {
    animation: ht-settle 0.4s cubic-bezier(0.3, 0.7, 0.2, 1) 1.1s both;
  }
  .js .scene__icon .ht-icon__glint {
    animation: ht-glint 0.4s cubic-bezier(0.45, 0, 0.2, 1) 1s both;
  }
  .js .scene__phone .phone__glint::before {
    animation: glass-glint 0.45s cubic-bezier(0.45, 0, 0.2, 1) 0.95s both;
  }
  /* the hairlines under the headline draw in, one after another */
  .js .hero__line::after {
    animation: rule-in 0.7s var(--ease) both;
    animation-delay: calc(0.1s + var(--i, 0) * 0.1s);
  }
  .js .final__line::after {
    transform: scaleX(0);
  }
  .js .final__panel.is-in .final__line::after {
    transform: none;
    transition: transform 0.9s var(--ease);
    transition-delay: calc(0.35s + var(--i, 0) * 0.12s);
  }
  /* marks lower on the page wait, tick hidden, until they scroll into view (site.js) */
  [data-tick].is-armed:not(.is-playing) .ht-tick__hand,
  [data-tick].is-armed:not(.is-playing) .ht-icon__hand {
    opacity: 0;
    transform: rotate(-40deg);
  }
  [data-tick].is-playing .ht-tick__hand,
  [data-tick].is-playing .ht-icon__hand {
    animation: ht-hand 1.1s linear 0.2s both;
  }
  [data-tick].is-playing .ht-tick__h,
  [data-tick].is-playing .ht-icon__h {
    animation: ht-settle 0.5s cubic-bezier(0.3, 0.7, 0.2, 1) 1.25s both;
  }
  [data-tick].is-playing .ht-tick__glint,
  [data-tick].is-playing .ht-icon__glint {
    animation: ht-glint 0.8s cubic-bezier(0.45, 0, 0.2, 1) 1.3s both;
  }
  /* after the first pass it rests on the check; a hover plays it once more */
  .scene__icon.is-rest .ht-icon__hand,
  .scene__icon.is-rest .ht-icon__h,
  .scene__icon.is-rest .ht-icon__glint,
  [data-tick].is-rest .ht-tick__hand,
  [data-tick].is-rest .ht-tick__h,
  [data-tick].is-rest .ht-tick__glint,
  [data-tick].is-rest .ht-icon__hand,
  [data-tick].is-rest .ht-icon__h,
  [data-tick].is-rest .ht-icon__glint {
    animation: none;
  }
  .scene__icon.is-again .ht-icon__hand,
  [data-tick].is-again .ht-tick__hand,
  [data-tick].is-again .ht-icon__hand {
    animation: ht-hand-b 1.1s linear both;
  }
  .scene__icon.is-again .ht-icon__h,
  [data-tick].is-again .ht-tick__h,
  [data-tick].is-again .ht-icon__h {
    animation: ht-settle-b 0.5s cubic-bezier(0.3, 0.7, 0.2, 1) 1.05s both;
  }
  .scene__icon.is-again .ht-icon__glint,
  [data-tick].is-again .ht-tick__glint,
  [data-tick].is-again .ht-icon__glint {
    animation: ht-glint-b 0.8s cubic-bezier(0.45, 0, 0.2, 1) 1.1s both;
  }
}
@keyframes rule-in {
  from {
    transform: scaleX(0);
  }
}
@keyframes icon-in {
  from {
    opacity: 0;
    translate: 0 -18px;
    scale: 0.9;
  }
}
@keyframes stop-in {
  from {
    opacity: 0;
    transform: translateY(-0.3em) scale(0.4);
  }
}
@keyframes phone-in {
  from {
    opacity: 0;
    translate: 0 24px;
    scale: 0.98;
  }
}
@keyframes contact-in {
  from {
    opacity: 0;
    transform: scaleX(0.6);
  }
}
@keyframes glass-glint {
  0% {
    opacity: 0;
    transform: translateX(-120%) rotate(18deg);
  }
  20%,
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(260%) rotate(18deg);
  }
}
/* three one-second steps of a watch hand, each with a small recoil, then the check */
@keyframes ht-hand {
  0% { transform: rotate(-40deg); opacity: 0; animation-timing-function: ease-out; }
  12% { transform: rotate(-40deg); opacity: 1; animation-timing-function: cubic-bezier(0.2, 1.6, 0.4, 1); }
  25%, 48% { transform: rotate(-26deg); opacity: 1; animation-timing-function: cubic-bezier(0.2, 1.6, 0.4, 1); }
  61%, 84% { transform: rotate(-13deg); opacity: 1; animation-timing-function: cubic-bezier(0.2, 1.8, 0.35, 1); }
  100% { transform: rotate(0deg); opacity: 1; }
}
@keyframes ht-hand-b {
  0% { transform: rotate(-40deg); opacity: 0; animation-timing-function: ease-out; }
  12% { transform: rotate(-40deg); opacity: 1; animation-timing-function: cubic-bezier(0.2, 1.6, 0.4, 1); }
  25%, 48% { transform: rotate(-26deg); opacity: 1; animation-timing-function: cubic-bezier(0.2, 1.6, 0.4, 1); }
  61%, 84% { transform: rotate(-13deg); opacity: 1; animation-timing-function: cubic-bezier(0.2, 1.8, 0.35, 1); }
  100% { transform: rotate(0deg); opacity: 1; }
}
@keyframes ht-settle { 30% { transform: scale(1.025); } }
@keyframes ht-settle-b { 30% { transform: scale(1.025); } }
@keyframes ht-glint {
  0% { transform: translateX(-900px); opacity: 0; }
  8%, 90% { opacity: 1; }
  100% { transform: translateX(1300px); opacity: 0; }
}
@keyframes ht-glint-b {
  0% { transform: translateX(-900px); opacity: 0; }
  8%, 90% { opacity: 1; }
  100% { transform: translateX(1300px); opacity: 0; }
}

/* ---------- footer ---------- */
/* above the final panel's shadow, so the shadow never greys the footer */
.foot {
  position: relative;
  z-index: 1;
  padding: 56px 0 0;
  background: #fff;
  border-top: 1px solid var(--line);
}
.foot__bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 32px;
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted-aa);
}
/* the sign-off: the outlined wordmark at full width in one quiet tone, cropped by
   the bottom of the page (the lockup at the top of the footer is the only mark) */
.foot__sign {
  margin-top: clamp(28px, 4vw, 48px);
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.foot__word {
  --wm-a: rgba(22, 26, 43, 0.05);
  --wm-b: rgba(11, 122, 85, 0.09);
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 444.9 / 94.77;
  margin-bottom: -7.2%; /* the glyphs lose their bottom fifth to the page edge */
}

/* ---------- 404 ---------- */
.foot--slim {
  padding: 28px 0 32px;
}
.foot--slim .foot__bar {
  align-items: center;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.foot__bar a {
  color: inherit;
}
/* the seller's GST details, on a line of their own under the slim footer */
.foot__legal {
  flex: 1 0 100%;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
}
@media (max-width: 760px) {
  .foot__legal > span { display: block; }
  .foot__legal .foot__dot { display: none; }
}
.foot__bar a:hover {
  color: var(--em);
}
.lost {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: calc(var(--nav-h) + 48px) 0 80px;
  overflow: hidden;
  text-align: center;
}
.lost__code {
  font-family: var(--serif);
  font-size: clamp(6rem, 3rem + 14vw, 13rem);
  font-weight: 400;
  font-variation-settings: "opsz" 144;
  line-height: 0.9;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.lost__code em {
  font-style: italic;
  color: var(--em);
}
.lost .h2 {
  margin-top: 18px;
}
/* one hairline under the title, as wide as the words, drawn in like the hero's */
.lost__title {
  position: relative;
  width: fit-content;
  max-width: min(760px, 100%);
  margin-inline: auto;
  padding-bottom: 0.06em;
}
.lost__title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.04em;
  height: 1px;
  background: rgba(22, 26, 43, 0.1);
  transform-origin: 0 50%;
}
@media (prefers-reduced-motion: no-preference) {
  .js .lost__title::after {
    animation: rule-in 0.9s var(--ease) 0.3s both;
  }
}
.lost .lead {
  max-width: 520px;
  margin: 22px auto 0;
}
.lost .hero__ctas {
  margin-top: 34px;
}

/* ---------- reveal + entrance motion ---------- */
/* a short rise that starts the moment a block's top edge is on screen
   (site.js), so a quick swipe never lands on empty canvas */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s var(--ease) calc(var(--d, 0) * 70ms), transform 0.9s var(--ease) calc(var(--d, 0) * 70ms);
}
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}
/* revealed cards that lift on hover: once in, the hover owns the transform */
@media (prefers-reduced-motion: no-preference) {
  /* the copy is legible from the first frame: the headline only settles 12px,
     the smaller lines rise in quickly around it */
  .js .hero__copy > * {
    animation: rise 0.5s var(--ease) both;
  }
  .js .hero__copy > .hero__title {
    animation: settle 0.7s var(--ease) both;
  }
  .js .hero__copy > :nth-child(3) { animation-delay: 0.06s; }
  .js .hero__copy > :nth-child(4) { animation-delay: 0.12s; }
  .js .hero__copy > :nth-child(5) { animation-delay: 0.18s; }
  .js .hero__copy > :nth-child(6) { animation-delay: 0.22s; }
  /* the at-a-glance strip rises with the hero, so the first view never ends on an empty rule */
  .aurora--1 { animation: drift-1 22s ease-in-out infinite alternate; }
  .aurora--2 { animation: drift-2 26s ease-in-out infinite alternate; }
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}
@keyframes settle {
  from {
    transform: translateY(12px);
  }
}
@keyframes card-in {
  from {
    opacity: 0;
    translate: 24px 0;
  }
}
@keyframes drift-1 {
  to {
    transform: translate3d(16px, -12px, 0) scale(1.03);
  }
}
@keyframes drift-2 {
  to {
    transform: translate3d(24px, 12px, 0) scale(1.03);
  }
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .nav__cta {
    transform: none !important;
  }
  .js .slide {
    transition-duration: 0.01s;
  }
}

/* ---------- responsive ---------- */
@media (min-width: 1200px) {
  /* split hero: copy in five columns, the phone scene in six */
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(32px, 3.5vw, 64px);
  }
  .hero__copy {
    align-items: flex-start;
    text-align: left;
  }
  .hero__copy .hero__ctas {
    justify-content: flex-start;
  }
  /* the totals rule closes the column under the call to action */
  .hero__total {
    width: 100%;
  }
  /* the contact shadow sits under the phone, which leads on the left of the pair */
  .scene__inner {
    --contact-l: 14%;
    --contact-r: 38%;
  }
  /* the pair ends on the content edge, like every other section */
  .scene__inner {
    justify-content: flex-end;
  }
  /* the icon moves to the phone's left, over the bezel only, beside the figures */
  .scene__icon {
    left: -29cqw;
    top: 34%;
  }
  /* big enough to read the invoice at 1x */
  .carousel__stage {
    --card-w: 400px;
  }
}

@media (min-width: 1680px) {
  :root {
    --shell: 1320px;
  }
  .carousel__stage {
    --card-w: 460px;
  }
  .scene__inner {
    max-width: 640px;
  }
  .phone.scene__phone {
    width: 324px;
  }
  .ui-card.scene__card {
    width: 252px;
  }
}

@media (max-width: 1240px) {
  .nav__links a {
    padding-inline: 9px;
    font-size: 14px;
  }
  .nav__bar {
    gap: 20px;
  }
}

@media (max-width: 1080px) {
  .nav__toggle {
    display: grid;
  }
  .nav__menu {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    max-height: calc(100vh - var(--nav-h));
    max-height: calc(100dvh - var(--nav-h));
    overflow-y: auto;
    padding: 8px var(--gutter) 28px;
    background: var(--canvas);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 30px 50px -30px rgba(22, 26, 43, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.3s var(--ease), transform 0.4s var(--ease), visibility 0s linear 0.4s;
  }
  .nav.is-open .nav__menu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.3s var(--ease), transform 0.4s var(--ease), visibility 0s;
  }
  /* the page behind an open menu dims, stays put (html.menu-open) and is inert
     (site.js), so the sheet reads as a layer and a tap outside closes it.
     top + height rather than bottom, so the layer is placed the same way
     whether or not the bar is the containing block of this fixed layer. */
  .nav::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    top: var(--nav-h);
    z-index: -1;
    height: 100vh;
    height: 100lvh;
    background: rgba(17, 20, 31, 0.38);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s var(--ease), visibility 0s linear 0.3s;
  }
  .nav.is-open::after {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s var(--ease), visibility 0s;
  }
  html.menu-open {
    overflow: hidden;
  }
  html.menu-open body {
    padding-right: var(--sbw, 0px); /* no jump where a scrollbar disappears */
  }
  html.menu-open .nav {
    padding-right: var(--sbw, 0px);
  }
  .nav__links {
    flex-direction: column;
    gap: 0;
  }
  .nav__links a {
    padding: 14px 2px;
    border-radius: 0;
    border-bottom: 1px solid var(--line);
    font-family: var(--serif);
    font-variation-settings: "opsz" 144;
    font-size: 25px;
    font-weight: 440;
    letter-spacing: -0.02em;
    color: var(--ink);
  }
  .nav__links a:hover {
    background: transparent;
    color: var(--em);
  }
  .nav__links::after {
    display: none;
  }
  .nav__menu-cta {
    display: inline-flex;
    margin-top: 22px;
    height: 52px;
  }
  .nav__end {
    margin-left: auto;
  }
  .no-js .nav__toggle {
    display: none;
  }
}

@media (max-width: 900px) {
  .carousel__stage {
    --card-w: 320px;
  }
  .carousel__ui {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  /* tablets get the app's own portrait chart beside the phone, readable at this size */
  .radar__stage {
    grid-template-columns: minmax(0, 190px) minmax(0, 440px);
    justify-content: center;
  }
  .radar__chart {
    padding: 18px 18px 12px;
  }
  .radar__steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .radar__steps li {
    padding: 26px 0 30px;
  }
}

@media (max-width: 700px) {
  :root {
    --nav-h: 64px;
  }
  body {
    font-size: 16px;
  }
  /* a compact call to action joins the bar once the hero button has scrolled away */
  .nav__end {
    gap: 8px;
  }
  .nav__cta {
    --h: 40px;
    position: relative;
    padding: 0 13px;
    font-size: 13px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.25s var(--ease), transform 0.4s var(--ease), visibility 0s linear 0.4s;
  }
  .nav--cta:not(.is-open) .nav__cta,
  .no-js .nav__cta {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.3s var(--ease), transform 0.45s var(--ease), visibility 0s;
  }
  /* a 40px button with an invisible 48px hit area */
  .nav__cta::after {
    content: "";
    position: absolute;
    inset: -4px 0;
  }
  .nav__cta-long {
    display: none;
  }
  .nav__cta-short {
    display: inline;
  }
  /* tap targets: 44px for every link and control a thumb can reach */
  .final__alt {
    min-height: 44px;
  }
  .foot--slim .foot__bar nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* what the button does, on one short line */
  .hero__micro {
    flex: none;
    order: 1;
    margin: 0 0 4px;
    font-size: 12.5px;
    white-space: nowrap;
  }
  .hero__explore {
    order: 2;
  }
  .hero {
    padding-top: calc(var(--nav-h) + 16px);
  }
  /* the copy column opens into the hero grid, so the status line can move under
     the phone and the phone starts on the first screen */
  .hero__grid {
    gap: 0;
    justify-items: center;
  }
  .hero__copy {
    display: contents;
  }
  .scene {
    order: 1;
    justify-self: stretch;
    margin-top: 10px;
    perspective: 1400px;
  }
  .hero__note {
    order: 2;
    margin-top: 18px;
    line-height: 1.7;
  }
  .hero__ctas {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 360px;
  }
  .hero__total {
    display: none;
  }
  .scene__card {
    margin-top: 30%;
  }
  /* the icon stays off the glass and inside the gutter: off the phone's upper
     right, above the invoice card */
  .scene__icon {
    width: min(22vw, 40cqw);
  }
  .final__mark {
    width: 96px;
  }
  .carousel__stage {
    --card-w: min(66vw, 280px);
    height: calc(var(--card-w) * 1.4135 + 146px);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  }
  /* phones: the caption shares its row with the pause button, and previous,
     the dots and next sit on one row below it */
  .carousel__ui {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    grid-template-areas: "cap cap tog" "prev dots next";
    align-items: center;
    gap: 14px 0;
    text-align: left;
  }
  .carousel__caption {
    grid-area: cap;
    align-self: start;
    padding-right: 12px;
  }
  .carousel__controls {
    display: contents;
  }
  .carousel__controls [data-prev] {
    grid-area: prev;
  }
  .carousel__controls [data-next] {
    grid-area: next;
  }
  .carousel__controls [data-toggle] {
    grid-area: tog;
    align-self: start;
  }
  .carousel__dots {
    grid-area: dots;
    justify-self: center;
    gap: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }
  .dot-btn {
    width: min(44px, calc((100vw - 2 * var(--gutter) - 88px) / 6));
    height: 44px;
    padding: 0;
    background: transparent !important;
    box-shadow: none !important;
  }
  .dot-btn::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: #d6d0c3;
    transition: transform 0.3s var(--ease), background-color 0.3s;
  }
  .dot-btn[aria-current="true"]::before {
    background: var(--em);
    transform: scale(1.25);
  }
  .dot-btn__label,
  .dot-btn__bar {
    display: none;
  }
  .final__ctas {
    flex-direction: column;
  }
}

@media (max-width: 600px) {
  :root {
    --r-4: 24px;
    --sh-float: 0 1px 2px rgba(22, 26, 43, 0.05), 0 20px 36px -24px rgba(22, 26, 43, 0.32);
  }
  /* secondary sentences that the phone layout leaves out (the same facts sit nearby) */
  .wide-only {
    display: none;
  }
  .phone-only {
    display: inline;
  }
  /* the address takes its own line, with no separator left at the end of the first */
  .section {
    padding-block: 48px;
  }
  .templates {
    padding-top: 56px;
    padding-bottom: 40px;
    background: linear-gradient(180deg, var(--canvas) 0, var(--paper) 72px, var(--paper) calc(100% - 72px), var(--canvas) 100%);
  }
  .radar {
    padding-block: 64px 48px;
  }
  /* phone hero: one primary button, a text link, and the product on the first
     screen; the status line follows the phone (iPhone timing is in the FAQ) */
  .hero {
    padding-top: calc(var(--nav-h) + 16px);
  }
  .hero__lead {
    margin-top: 12px;
    font-size: 1.0625rem;
    line-height: 1.5;
  }
  .hero__ios {
    display: none;
  }
  .hero__note {
    margin-top: 16px;
    font-size: 13.5px;
    line-height: 1.5;
  }
  .btn--lg {
    --h: 52px;
  }
  /* one row: the button and a quiet ghost beside it. What the button does is
     read out as its description instead of a third grey line (hero__micro). */
  .hero .hero__ctas {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
    max-width: none;
    margin-top: 20px;
  }
  .hero__micro {
    display: none;
  }
  .hero__kicker {
    margin-bottom: 10px;
  }
  .hero__title {
    margin-top: 4px;
  }
  .hero .hero__ctas .btn--primary {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 18px;
  }
  .btn.hero__explore {
    flex: none;
    padding: 0 18px;
  }
  .hero__total {
    margin-top: 16px;
  }
  .head {
    margin-bottom: 32px;
  }
  .folio {
    margin-bottom: 16px;
  }
  /* wide app screens are unreadable at phone width: the signature chart
     switches to the app's own portrait layout, the bills lead with the phone */
  .radar__stage {
    display: block;
  }
  .phone--radar {
    display: none;
  }
  .radar__chart {
    margin: 0;
    padding: 18px 14px 12px;
  }
  .radar__steps {
    margin-top: 36px;
  }
  .radar__steps li {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 12px;
    padding: 18px 0 20px;
  }
  .radar__n {
    grid-row: 1 / span 2;
    font-size: 36px;
  }
  .radar__steps h3 {
    margin: 2px 0 6px;
    font-size: 20px;
  }
  .radar__steps p {
    font-size: 15px;
    line-height: 1.55;
  }
  /* the Cash Radar steps, a little tighter */
  .radar__steps p {
    font-size: 14.5px;
  }
  /* full size view: as big as the phone allows, the invoice opens at 2x and pans */
  .zoom {
    width: calc(100vw - 16px);
    height: auto; /* a modal dialog is pinned top and bottom: shrink it to its content */
    height: -moz-fit-content;
    height: fit-content;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
  }
  .zoom__bar {
    gap: 8px;
    padding: 10px 10px 10px 16px;
  }
  .zoom__title {
    font-size: 20px;
  }
  .zoom__actions {
    gap: 4px;
  }
  .zoom__close {
    margin-left: 2px;
  }
  .zoom__body {
    padding: 8px 8px 72px;
    touch-action: pan-x pan-y pinch-zoom;
  }
  .zoom.is-2x .zoom__img {
    width: 200%;
    max-width: none;
  }
  .zoom__tools {
    display: flex;
  }
  .foot {
    padding: 44px 0 0;
  }
  .foot__bar {
    margin-top: 32px;
  }
  .ui-card {
    box-shadow: 0 1px 2px rgba(22, 26, 43, 0.05), 0 20px 36px -24px rgba(22, 26, 43, 0.32);
  }
  .ui-card--night {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.4), 0 30px 60px -34px rgba(0, 0, 0, 0.8);
  }
  :root {
    --dev-drop: 0 1px 1px rgba(22, 26, 43, 0.14), 2px 10px 20px -10px rgba(22, 26, 43, 0.26), 6px 34px 60px -28px rgba(6, 74, 51, 0.4), 10px 70px 100px -60px rgba(11, 122, 85, 0.32);
  }
}

@media (max-width: 380px) {
  .brand__mark {
    width: 32px;
    height: 32px;
  }
  .brand__word {
    width: 109.3px;
    height: 23.3px;
  }
  .brand {
    gap: 7px;
  }
  .nav__cta {
    padding: 0 11px;
  }
  /* the status line wraps here: one fact per line, no separator left dangling */
  .hero__sep--break {
    display: none;
  }
  .hero__note > .nowrap {
    display: block;
  }
  /* "Download" and "Pricing" share one row: "for Android" is in the kicker above */
  .hero__dl-for {
    display: none;
  }
}

@media (max-width: 359px) {
  .nav__cta {
    display: none;
  }
  .nav__bar {
    gap: 12px;
  }
}

/* touch screens wider than a phone (tablets) get the same 44px targets */
@media (pointer: coarse) and (min-width: 701px) {
  .dot-btn {
    min-height: 44px;
  }
}

@media print {
  .nav,
  .scene,
  .carousel__controls,
  .final__mark {
    display: none;
  }
  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* =====================================================================
   THE WORKING COUNTER: every chapter below the four approved sections
   (hero, Cash Radar, invoice designs, final call to action) is a working
   object that runs in the browser and sends nothing. Three groups, each
   with its own prefix and nothing outside it:
     ct-  at a glance, 03 The Counter (#get-paid), 04 Month close (#purchase-bills, #reports)
     ak-  05 Ask the app (#features), 06 The empty column (#privacy)
     qt-  07 The quotation (#pricing), 08 Questions (#faq), the colophon (footer)
   ===================================================================== */

/* ---------- ct-: at a glance, the counter, month close ---------- */
/* Hisab Time · g1: At a glance, 03 The Counter, 04 Month close (with Reports). Prefix ct-.
   Motion: transform and opacity only, quart for feedback, expo for landings, once each. */
:root {
  /* shared by every chapter: one ease pair (quart for feedback, expo for landings),
     one sheet of paper, one hairline, one Devanagari stack */
  --quart: cubic-bezier(.25, 1, .5, 1);
  --expo: cubic-bezier(.16, 1, .3, 1);
  --ivory-face: linear-gradient(180deg, #fffefa 0%, #fdf7ea 50%, #f4ead3 100%);
  --sheet: #fffefb;
  --hair: rgba(22,26,43,.1);
  --sheet-sh: 0 1px 1px rgba(22,26,43,.06), 0 18px 40px -22px rgba(22,26,43,.28), 0 60px 100px -60px rgba(6,74,51,.22);
  --deva: "Nirmala UI", "Noto Sans Devanagari", "Kohinoor Devanagari", sans-serif;
  /* the space between two chapters on the same paper */
  --chapter: clamp(64px, 5.4vw, 96px);
  --ct-kraft: #e9dcc0;
  --ct-edge: #d8c69a;
  --ct-band: radial-gradient(130% 100% at 16% 0%, #139564 0%, #0b7a55 34%, #075538 68%, #04331f 100%);
  --ct-tx: #fbf6ea;
  --ct-tx2: #c3d8cc;
  --ct-thin: rgba(251,246,234,.14);
  --ct-line: rgba(251,246,234,.2);
  --ct-well: rgba(1,22,14,.38);
  --ct-err: #b42a3f;
  --ct-err-d: #ffb4bf;
  --ct-chk: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m6.5 12.5 3.6 3.6L17.5 8.5' fill='none' stroke='%23161a2b' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  --ct-fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='ct-f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8 .35' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .24 0 0 0 0 .1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23ct-f)' opacity='.06'/%3E%3C/svg%3E");
}

/* shared type: small caps labels, and Fraunces numerals that sit like objects */
.ct-gx__label, .ct-chips__k, .ct-fld__k, .ct-ann dt, .ct-beam b, .ct-settle__k, .ct-echo b, .ct-thread__k,
.ct-sheet__t, .ct-sheet__rows dt, .ct-sheet__k, .ct-add__k, .ct-label__k, .ct-tab__n, .ct-rep__t {
  font: 700 11.5px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-aa);
}
.ct-counter .ct-gx__label, .ct-counter .ct-chips__k, .ct-fld__k, .ct-ann dt, .ct-beam b, .ct-settle__k, .ct-echo b { color: var(--ct-tx2); }
.ct-tile, .ct-beam__lab > span, .ct-bill__total, .ct-slip__tot, .ct-sheet__big, .ct-slot--money input, .ct-label__m, .ct-rep__pct, .ct-rep__keys dd {
  font-family: var(--serif); font-variation-settings: "opsz" 144; font-variant-numeric: lining-nums tabular-nums;
}

/* ================= AT A GLANCE: the accountant's closing double rule ================= */
.ct-glance { padding: clamp(28px, 3vw, 48px) 0 clamp(48px, 4.4vw, 64px); }
.ct-glance__list {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); margin: 0; padding: 5px 0 0; list-style: none;
  background: linear-gradient(var(--line-hi), var(--line-hi)) 0 0 / 100% 1px no-repeat, linear-gradient(var(--line-hi), var(--line-hi)) 0 4px / 100% 1px no-repeat;
  border-bottom: 1px solid var(--line);
}
.ct-glance__item { position: relative; display: grid; align-content: start; padding: 20px 26px; }
.ct-glance__item:first-child { padding-left: 0; }
.ct-glance__item + .ct-glance__item::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 1px; background: var(--line); }
.ct-glance__t { font: 500 20px/1.15 var(--serif); font-variation-settings: "opsz" 36; letter-spacing: -.01em; color: var(--ink); }
.ct-glance__d { max-width: 30ch; margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--muted-aa); }
@media (min-width: 1600px) { .ct-glance { padding-bottom: calc(clamp(48px, 4.4vw, 64px) + 16px); } }

/* ================= 03 THE COUNTER: an emerald band, the app tile's own material ================= */
.ct-counter { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(72px, 5.4vw, 96px); border-radius: var(--band-r); background: #04331f; color: var(--ct-tx2); }
/* lit from the top left like the tile; the light sits high enough that every small line stays AA */
.ct-counter__bg { position: absolute; inset: 0; z-index: -1; background: var(--ct-band) 0 -760px / 100% 1500px no-repeat, #04331f; }
.ct-counter__bg::after {
  content: ""; position: absolute; inset: 0; opacity: .2; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='ct-g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .6 0'/></filter><rect width='180' height='180' filter='url(%23ct-g)'/></svg>");
}
.ct-counter :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.ct-head { margin-bottom: clamp(40px, 4vw, 64px); }
/* wide: the headline runs on one line, the lead and its cross-reference share the row under it */
@media (min-width: 1101px) {
  .ct-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); column-gap: clamp(48px, 6vw, 96px); align-items: start; }
  .ct-head__folio, .ct-head__title { grid-column: 1 / -1; }
  .ct-head .ct-head__title { max-width: none; }
  .ct-thread { flex-direction: column; gap: 8px; margin-top: 28px; }
}
.ct-head__folio { color: var(--ct-tx2); }
.ct-head__folio .folio__no, .ct-head__title { color: var(--ct-tx); }
.ct-head__title { max-width: 11ch; }
.ct-head__title em { color: var(--gold); }
.ct-head__lead { max-width: 60ch; margin-top: 24px; font-size: var(--lead-l); line-height: 1.6; }
/* the cross-reference: the counter's bill is the overdue one in the hero, and it moves Reports */
.ct-thread { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; max-width: 76ch; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--ct-thin); font-size: 15px; line-height: 1.55; color: var(--ct-tx); }
.ct-thread__k { display: inline-flex; align-items: center; gap: 10px; color: var(--ct-tx); }
.ct-thread__k::before { content: ""; width: 18px; height: 1px; background: var(--gold); }

/* stations: no cards, only hairlines */
.ct-stn__top { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 8px 20px; align-items: start; }
.ct-stn__no { min-width: .62em; font: 300 68px/.78 var(--serif); font-variation-settings: "opsz" 144; color: rgba(251,246,234,.3); }
.ct-stn__t { font: 470 clamp(1.5rem, 1.2rem + .8vw, 1.875rem)/1.1 var(--serif); letter-spacing: -.015em; color: var(--ct-tx); }
.ct-stn__d { margin-top: 8px; max-width: 48ch; font-size: 15px; line-height: 1.55; }
.ct-stn--gstin { padding-bottom: clamp(36px, 3.4vw, 52px); border-bottom: 1px solid var(--ct-thin); }

/* ---- 1. the reader: fifteen type slugs ---- */
.ct-gx { --tg: 6px; --cols: 1fr 1fr 6px repeat(10, 1fr) 6px 1fr 6px 1fr 6px 1fr; margin-top: clamp(24px, 2.6vw, 36px); }
.ct-gx__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 24px; margin-bottom: 20px; }
.ct-gx__label { display: flex; align-items: baseline; gap: 14px; }
.ct-gx__count { padding-left: 14px; border-left: 1px solid var(--ct-line); letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--ct-tx); }
.ct-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ct-chips__k { margin-right: 4px; }
.ct-chip { min-height: 44px; padding: 0 16px; border: 1px solid var(--ct-line); border-radius: 999px; background: rgba(251,246,234,.04); color: var(--ct-tx); font: 600 14px/1 var(--sans); cursor: pointer; transition: transform .2s var(--quart); }
.ct-chip:hover { border-color: rgba(251,246,234,.45); background: rgba(251,246,234,.09); }
.ct-chip:active, .ct-btn:active { transform: scale(.97); }
.ct-chip[aria-pressed="true"] { background: var(--ct-tx); border-color: var(--ct-tx); color: var(--em-deep); }
.ct-gx__field { position: relative; }
.ct-gx__row, .ct-gx__read { display: grid; grid-template-columns: var(--cols); column-gap: var(--tg); }
.ct-gx__row > .ct-tile:nth-child(3) { grid-column: 4; }
.ct-gx__row > .ct-tile:nth-child(13) { grid-column: 15; }
.ct-gx__row > .ct-tile:nth-child(14) { grid-column: 17; }
.ct-gx__row > .ct-tile:nth-child(15) { grid-column: 19; }
/* a slug: the ivory face of the h, a sunk lower edge, a shadow on the felt */
.ct-tile {
  position: relative; display: grid; place-items: center; aspect-ratio: .78; border-radius: 8px;
  background: linear-gradient(180deg, #f6eedb, #ece0c3); box-shadow: inset 0 -2px 0 #ddcba3, 0 1px 0 rgba(0,0,0,.14);
  font-weight: 520; font-size: clamp(22px, 3.8vw, 42px); line-height: 1; color: rgba(22,26,43,.18); user-select: none;
}
.ct-tile.is-on { background: var(--ivory-face); box-shadow: inset 0 -3px 0 #e6d6b0, 0 2px 0 rgba(0,0,0,.18), 0 10px 18px -10px rgba(0,0,0,.45); color: var(--ink); }
.ct-tile.is-ghost { background: rgba(251,246,234,.06); box-shadow: inset 0 0 0 1.5px var(--gold); color: rgba(251,246,234,.62); }
.ct-tile.is-bad { background: linear-gradient(180deg, #fff6f7, #fbe3e7); box-shadow: inset 0 -3px 0 #f1c3cb, 0 0 0 2px var(--ruby); color: var(--ink); }
.ct-tile.is-sel { box-shadow: inset 0 -3px 0 #e6d6b0, 0 0 0 2px var(--gold); }
.ct-tile.is-good::after, .ct-verdict.is-good .ct-verdict__mark, .ct-bill__tick { background: var(--gold) var(--ct-chk) center / 80% no-repeat; border-radius: 50%; }
.ct-tile.is-good::after { content: ""; position: absolute; top: -7px; right: -7px; width: clamp(14px, 1.5vw, 20px); aspect-ratio: 1; box-shadow: 0 0 0 2px #075538; }
/* the caret: a 2px gold bar where the next character goes */
.ct-tile.is-caret::before { content: ""; position: absolute; top: 16%; bottom: 16%; left: -4px; width: 2px; border-radius: 2px; background: var(--gold); opacity: 0; }
.ct-tile.is-end::before { left: auto; right: -4px; }
.ct-gx__field:focus-within .ct-tile.is-caret::before { opacity: 1; }
.ct-gx__field:focus-within { outline: 2px solid var(--gold); outline-offset: 12px; border-radius: 10px; }
.ct-echo { display: none; }
.ct-gx__in { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); margin: 0; padding: 0; border: 0; background: none; color: transparent; caret-color: transparent; font-size: 16px; opacity: 0; cursor: text; }
.ct-gx__in:focus-visible { outline: none; }
.ct-gx__read { margin: 22px 0 0; }
.ct-ann { position: relative; padding-top: 14px; border-top: 1px solid rgba(251,246,234,.32); transition: opacity .3s var(--quart); }
.ct-ann--state::before, .ct-ann--state::after, .ct-ann--pan::before, .ct-ann--pan::after { content: ""; position: absolute; top: -1px; left: 0; width: 1px; height: 7px; background: rgba(251,246,234,.32); }
.ct-ann--state::after, .ct-ann--pan::after { left: auto; right: 0; }
.ct-ann.is-off { opacity: .42; }
.ct-ann--state { grid-column: 1 / 3; }
.ct-ann--pan { grid-column: 4 / 14; }
.ct-ann--reg { grid-column: 15; }
.ct-ann--z { grid-column: 17; }
.ct-ann--chk { grid-column: 19; }
.ct-ann--reg, .ct-ann--z, .ct-ann--chk { text-align: center; }
.ct-ann dt { font-size: 11px; white-space: nowrap; }
.ct-ann dd { margin: 6px 0 0; font: 450 clamp(16px, .8rem + .55vw, 21px)/1.25 var(--serif); color: var(--ct-tx); }
.ct-ann.is-bad dd, .ct-echo.is-bad { color: var(--ct-err-d); }
.ct-gx__foot { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(0,1fr); gap: 20px clamp(32px, 5vw, 80px); align-items: start; margin-top: clamp(28px, 3vw, 40px); }
.ct-verdict, .ct-split__says { min-height: 2.7em; font: 400 22px/1.35 var(--serif); color: var(--ct-tx); }
.ct-verdict { display: flex; gap: 14px; align-items: flex-start; }
.ct-verdict strong { color: var(--ct-tx); font-weight: 600; }
.ct-verdict em { color: var(--gold); }
.ct-verdict__mark { flex: none; width: 26px; height: 26px; margin-top: 3px; border-radius: 50%; border: 1.5px dashed rgba(251,246,234,.4); }
.ct-verdict.is-good .ct-verdict__mark { border: 0; }
.ct-verdict.is-bad .ct-verdict__mark { border: 0; background: var(--ct-err-d) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 7v6.5M12 17h.01' fill='none' stroke='%23161a2b' stroke-width='2.6' stroke-linecap='round'/></svg>") center / 80% no-repeat; }
.ct-gx__next { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.55; }
.ct-gx__next .i { margin-top: 1px; color: var(--gold); }
.ct-gx__next strong { color: var(--ct-tx); }

/* ---- 2 and 3, side by side ---- */
.ct-desk__pair { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.ct-desk__pair > .ct-stn { padding-block: clamp(36px, 3.4vw, 52px); }
.ct-stn--split { padding-right: clamp(28px, 3.5vw, 56px); }
.ct-stn--remind { display: flex; flex-direction: column; padding-left: clamp(28px, 3.5vw, 56px); border-left: 1px solid var(--ct-thin); }
.ct-ctl { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 18px 16px; margin-top: 28px; }
.ct-ctl--one { grid-template-columns: minmax(0,1fr); }
.ct-fld, .ct-add__f { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ct-fld--wide { grid-column: 1 / -1; }
.ct-fld > legend, .ct-add__f > legend { margin-bottom: 8px; padding: 0; }
.ct-slot { border: 1px solid var(--ct-line); border-radius: var(--r-1); background-color: var(--ct-well); box-shadow: inset 0 1px 2px rgba(0,0,0,.22); }
.ct-slot { width: 100%; min-width: 0; height: 48px; padding: 0 14px; color: var(--ct-tx); font: 500 16px/1 var(--sans); }
.ct-slot:hover { border-color: rgba(251,246,234,.34); }
.ct-slot:focus, .ct-slot:focus-within { border-color: var(--gold); }
.ct-slot--money:focus-within { outline: 2px solid var(--gold); outline-offset: 3px; }
.ct-slot--money.is-bad { border-color: var(--ct-err-d); }
.ct-fld__err { display: block; font-size: 13.5px; font-weight: 650; color: var(--ct-err-d); }
.ct-fld__err[hidden] { display: none; }
.ct-slot--sel, .ct-add__f > select { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m7 10 5 5 5-5' fill='none' stroke='%23fbf6ea' stroke-width='1.8' stroke-linecap='round'/></svg>"); background-position: right 12px center; background-size: 20px; background-repeat: no-repeat; text-overflow: ellipsis; cursor: pointer; }
.ct-slot--sel option { color: var(--ink); background: #fff; }
.ct-slot--money { display: flex; align-items: center; gap: 6px; }
.ct-slot--money input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; color: var(--ct-tx); font-size: 22px; font-weight: 500; }
.ct-slot--money input:focus { outline: none; }
.ct-slot__pre { font: 20px var(--serif); color: var(--ct-tx2); }
/* one segmented control for every chapter: a sunk track, a raised face for the choice,
   44px targets and a 3px focus ring. On paper by default; .seg--dark on the emerald band. */
.seg { display: flex; gap: 2px; min-width: 0; margin: 0; padding: 3px; border: 1px solid var(--line-hi); border-radius: var(--r-1); background: #f1ede3; box-shadow: inset 0 1px 2px rgba(22,26,43,.07); }
.seg label { position: relative; flex: 1 1 0; min-width: 0; }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg span { display: grid; place-items: center; height: 44px; padding: 0 10px; border-radius: 9px; font: 650 14px/1 var(--sans); white-space: nowrap; color: var(--ink-2); pointer-events: none; }
.seg label:hover span { color: var(--ink); }
.seg input:checked + span { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(22,26,43,.12), 0 4px 10px -6px rgba(22,26,43,.35); }
.seg input:focus-visible + span { outline: 3px solid var(--em); outline-offset: 1px; }
.seg--5 span { padding: 0 4px; }
.seg--dark { border-color: var(--ct-line); background: var(--ct-well); box-shadow: inset 0 1px 2px rgba(0,0,0,.22); }
.seg--dark span { color: var(--ct-tx2); }
.seg--dark label:hover span { color: var(--ct-tx); }
.seg--dark input:checked + span { background: var(--ct-tx); color: var(--em-deep); box-shadow: inset 0 -2px 0 #e6d6b0, 0 4px 10px -4px rgba(0,0,0,.5); }
.seg--dark input:focus-visible + span { outline-color: var(--gold); }
.seg [lang="hi"] { font: 600 15px/1 var(--deva); }

/* the split: one beam for IGST; for CGST and SGST it parts around a gold notch */
.ct-split { margin-top: 26px; }
.ct-split__says b { font-weight: 600; color: var(--gold); }
.ct-beam { margin-top: 18px; }
.ct-beam__labs { position: relative; height: 50px; }
.ct-beam__lab { position: absolute; bottom: 0; transition: opacity .2s var(--quart), transform .45s var(--expo); }
.ct-beam__lab--a { left: 0; }
.ct-beam__lab--b { right: 0; text-align: right; }
.ct-beam__lab--w { left: 0; right: 0; text-align: center; }
.ct-beam b { display: block; }
.ct-beam__lab > span { display: block; margin-top: 4px; font-size: 24px; font-weight: 500; line-height: 1; color: var(--ct-tx); }
.ct-beam__bar { position: relative; height: 6px; margin-top: 14px; }
.ct-beam__w, .ct-beam__h { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--ct-tx); box-shadow: 0 4px 10px -4px rgba(0,0,0,.6); }
.ct-beam__w { left: 0; right: 0; transition: opacity .2s var(--quart); }
.ct-beam__h { width: calc(50% - 12px); transform: scaleX(0); transition: transform .45s var(--expo); }
.ct-beam__h--a { left: 0; transform-origin: right; }
.ct-beam__h--b { right: 0; transform-origin: left; }
.ct-beam__notch { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 2px; background: var(--gold); transform: rotate(45deg) scale(0); transition: transform .45s var(--expo); }
[data-mode="cgst"] .ct-beam__w, [data-mode="cgst"] .ct-beam__lab--w, .ct-split:not([data-mode="cgst"]) .ct-beam__lab--a, .ct-split:not([data-mode="cgst"]) .ct-beam__lab--b { opacity: 0; }
[data-mode="cgst"] .ct-beam__h { transform: scaleX(1); }
[data-mode="cgst"] .ct-beam__notch { transform: rotate(45deg) scale(1); }
.ct-split:not([data-mode="cgst"]) .ct-beam__lab--a { transform: translateX(20%); }
.ct-split:not([data-mode="cgst"]) .ct-beam__lab--b { transform: translateX(-20%); }
[data-mode="none"] .ct-beam__w { opacity: .4; }

/* the bill: a slip torn from the bill book */
.ct-bill { margin-top: 18px; filter: drop-shadow(0 1px 1px rgba(1,26,17,.3)) drop-shadow(0 18px 22px rgba(1,26,17,.45)); }
.ct-bill__paper, .ct-slip--roll { --zz: 7px; -webkit-mask: var(--ct-tear); mask: var(--ct-tear); }
.ct-bill__paper {
  --ct-tear: linear-gradient(#000 0 0) top / 100% calc(100% - var(--zz)) no-repeat, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--zz)) var(--zz) repeat-x;
  position: relative; padding: 22px 24px calc(20px + var(--zz)); border-radius: 6px 6px 0 0; background: var(--sheet); color: var(--ink);
}
.ct-bill__head { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--hair); font: 750 11px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.ct-bill__rows, .ct-bill__bal { margin: 0; }
.ct-bill__rows > div, .ct-bill__bal > div, .ct-sheet__rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 6px 0; }
.ct-bill__rows > div:first-child { padding-top: 12px; }
.ct-bill__rows > div:nth-child(3) { margin-top: 6px; }
.ct-bill__m { padding-block: 9px !important; border-top: 1px dashed rgba(22,26,43,.16); }
.ct-bill dt { font-size: 13.5px; color: var(--muted-aa); }
.ct-bill dd { margin: 0; font-size: 14.5px; font-weight: 600; text-align: right; font-variant-numeric: lining-nums tabular-nums; color: var(--ink); }
.ct-bill__m dt { font-size: 14.5px; color: var(--ink-2); }
.ct-bill__total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 4px; padding-top: 12px; border-top: 1.5px solid var(--ink); font-size: 30px; font-weight: 500; line-height: 1.1; color: var(--ink); }
.ct-bill__total span:first-child { font-size: 22px; }
.ct-bill__words { margin-top: 6px; font: italic 14px/1.4 var(--serif); text-align: right; color: var(--ink-2); }
.ct-bill__bal { margin-top: 14px; padding-top: 6px; border-top: 1px solid var(--hair); }
.ct-bill__due dt { font-weight: 700; color: var(--ink); }
.ct-bill__due dd { display: inline-flex; align-items: center; gap: 8px; }
.ct-bill__due [data-ct-due] { padding-bottom: 1px; border-bottom: 3px double var(--ink); }
.ct-bill__tick { display: none; width: 18px; height: 18px; }
.is-paid .ct-bill__tick { display: inline-block; }

/* the rubber stamp: one emerald ink, pressed once */
.ct-stamp { position: absolute; left: calc(46% - 92px); bottom: 16px; width: 184px; height: auto; overflow: visible; color: var(--em); opacity: 0; mix-blend-mode: multiply; transform: rotate(-8deg); pointer-events: none; transition: opacity .2s var(--quart); }
.ct-stamp__w { font: 800 52px var(--sans); letter-spacing: .12em; }
.ct-stamp__s { font: 700 12px var(--sans); letter-spacing: .04em; }
.ct-stamp__hi { font-family: var(--deva); }
.is-paid .ct-stamp { opacity: .88; }

/* ---- 3. remind, then settle ---- */
.ct-chat { margin: 24px 0; }
.ct-bubble { max-width: 96%; padding: 14px 16px 10px; border-radius: 16px 16px 16px 4px; background: var(--ivory-face); box-shadow: inset 0 -2px 0 #ece0c3, 0 1px 1px rgba(1,26,17,.3), 0 18px 30px -16px rgba(1,26,17,.7); color: var(--ink); transition: opacity .3s var(--quart); }
.ct-bubble__text { min-height: 5em; font-size: 15.5px; line-height: 1.6; color: var(--ink); }
.ct-bubble[lang="hi"] .ct-bubble__text { font-family: var(--sans), var(--deva); font-size: 16px; line-height: 1.75; }
.ct-bubble__text mark { padding: 0 1px; border-radius: 2px; background: linear-gradient(to bottom, transparent 62%, rgba(245,196,90,.55) 62%); color: var(--ink); font-weight: 650; }
.ct-bubble__meta { display: flex; justify-content: flex-end; align-items: center; gap: 5px; margin-top: 2px; font-size: 11.5px; color: var(--muted-aa); }
.ct-bubble__meta svg { width: 22px; height: 12px; fill: none; stroke: var(--gold-deep); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ct-bubble__done { display: flex; align-items: center; gap: 12px; font: italic 400 19px/1.4 var(--serif); color: var(--ink); }
.ct-bubble__done::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--gold) var(--ct-chk) center / 80% no-repeat; }
.ct-chat__cap { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 14px 20px; align-items: start; margin-top: 20px; }
.ct-chat__note { max-width: 46ch; font-size: 13.5px; line-height: 1.6; }
.ct-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 18px; border: 1px solid rgba(251,246,234,.45); border-radius: var(--r-1); background: none; color: var(--ct-tx); font: 650 14.5px/1 var(--sans); white-space: nowrap; cursor: pointer; transition: transform .16s var(--quart); }
.ct-btn .i, .ct-dl .i { width: 18px; height: 18px; }
.ct-btn--o:hover { border-color: var(--ct-tx); background: rgba(251,246,234,.08); }
.ct-btn--f, .ct-copy.is-done { border-color: var(--ct-tx); background: var(--ct-tx); color: var(--ink); }
.ct-btn--f { box-shadow: inset 0 -2px 0 #e6d6b0; }
.ct-btn--f:hover { background: #fffdf6; }
.ct-btn:disabled, .ct-btn:disabled:hover { opacity: .4; border-color: rgba(251,246,234,.45); background: none; color: var(--ct-tx); box-shadow: none; cursor: default; transform: none; }
.ct-settle { margin-top: auto; padding-top: 24px; border-top: 1px solid var(--ct-thin); }
.ct-settle__row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.ct-again { min-height: 44px; margin-top: 8px; padding: 0 4px; border: 0; background: none; color: var(--ct-tx); font: 650 14.5px/1 var(--sans); text-decoration: underline; text-decoration-color: rgba(251,246,234,.45); text-underline-offset: 4px; cursor: pointer; }

/* ---- the quiet line: what this page sends ---- */
.ct-quiet { display: flex; align-items: baseline; gap: 12px; padding-top: clamp(24px, 2.6vw, 34px); border-top: 1px solid var(--ct-thin); font-size: 15px; line-height: 1.55; color: var(--ct-tx2); }
.ct-quiet strong { font-weight: 650; color: var(--ct-tx); }
.ct-quiet__dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); transform: translateY(-2px); }

/* ================= 04 MONTH CLOSE ================= */
.ct-month { padding-block: var(--chapter) clamp(40px, 4vw, 64px); }
.ct-mhead { margin-bottom: clamp(36px, 4vw, 56px); }
.ct-mhead .h2 { max-width: 20ch; }
@media (min-width: 1101px) { .ct-mhead .h2 { max-width: none; } }
.ct-mhead__lead { max-width: 60ch; margin-top: 20px; font-size: var(--lead-l); line-height: 1.6; color: var(--ink-2); }

/* the file: a kraft board with a thumb index down its right edge */
.ct-file { display: grid; grid-template-columns: minmax(0,1fr) 88px; align-items: start; }
.ct-file__board { grid-area: 1 / 1; position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr); gap: clamp(24px, 3vw, 44px); min-height: 500px; padding: clamp(24px, 2.6vw, 36px); border: 1px solid var(--ct-edge); border-radius: 6px; background: var(--ct-fibre), var(--ct-kraft); box-shadow: var(--sheet-sh), inset 0 1px 0 rgba(255,255,255,.45); }
.ct-file__bills { display: flex; flex-direction: column; }
/* the file's own label, pasted on the kraft */
.ct-label { align-self: flex-start; min-width: 220px; margin-bottom: 26px; padding: 10px 16px 11px; border-radius: 3px; background: #fffdf7; box-shadow: inset 0 0 0 4px #fffdf7, inset 0 0 0 5px rgba(22,26,43,.55), 0 1px 1px rgba(22,26,43,.12), 0 6px 12px -8px rgba(22,26,43,.4); transform: rotate(-.8deg); }
.ct-label__k { font-size: 10.5px; letter-spacing: .16em; color: var(--ink-2); }
.ct-label__m { margin-top: 4px; font-size: 24px; font-weight: 500; line-height: 1.1; color: var(--ink); }
.ct-label__n { margin-top: 2px; font-size: 13px; color: var(--ink-2); }
.ct-slips { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px 24px; margin: 0; padding: 0; list-style: none; }
.ct-slip { position: relative; display: flex; flex-direction: column; min-height: 206px; padding: 16px 18px 14px; border-radius: 4px; background: var(--sheet); box-shadow: 0 1px 1px rgba(22,26,43,.1), 0 12px 22px -14px rgba(22,26,43,.45); color: var(--ink); transform: rotate(var(--r, 0deg)); }
.ct-slip__hd { margin: -2px 0 10px; padding-bottom: 7px; border-bottom: 3px double rgba(22,26,43,.22); font: 750 10.5px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.ct-slip__sup { font: 560 17px/1.2 var(--serif); color: var(--ink); }
.ct-slip__no { margin-top: 3px; font-size: 12.5px; color: var(--muted-aa); }
.ct-slip__tot { margin-top: 14px; font-size: 22px; font-weight: 500; line-height: 1.1; }
.ct-slip__gst { margin-top: 3px; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ct-slip__itc { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; font-size: 12.5px; font-weight: 650; color: var(--em); }
.ct-slip__tag { padding: 3px 7px 2px; border: 1px solid currentColor; border-radius: 4px; font: 750 10px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.ct-slip__itc.is-off { color: var(--muted-aa); font-weight: 600; }
/* papers: an A5 print, a thermal roll, a photocopy, a letterhead */
.ct-slip--roll {
  --zz: 6px; --ct-tear: linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--zz)) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) top / calc(2 * var(--zz)) var(--zz) repeat-x, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--zz)) var(--zz) repeat-x;
  margin-inline: 6%; padding-block: 22px 20px; background: #fbf7ec; box-shadow: none; filter: drop-shadow(0 8px 10px rgba(22,26,43,.2)); text-align: center;
}
.ct-slip--roll .ct-slip__hd { border-bottom: 1px dashed rgba(22,26,43,.3); }
.ct-slip--roll .ct-slip__itc { justify-content: center; }
.ct-slip--copy { background: radial-gradient(rgba(22,26,43,.16) .6px, transparent 1px) 0 0 / 37px 29px, radial-gradient(rgba(22,26,43,.12) .5px, transparent 1px) 11px 7px / 23px 41px, linear-gradient(90deg, rgba(22,26,43,.07), transparent 9% 91%, rgba(22,26,43,.07)) #f3f2ee; }
.ct-slip--letter { padding-top: 18px; background: #fdf8ec; }
.ct-slip--letter .ct-slip__hd { display: none; }
.ct-slip--letter .ct-slip__sup { padding-bottom: 8px; border-bottom: 1px solid rgba(22,26,43,.5); box-shadow: 0 3px 0 -2px rgba(22,26,43,.5); font-style: italic; font-size: 18px; text-align: center; }
.ct-slip--letter .ct-slip__no { margin-top: 10px; }
.ct-slip--plain .ct-slip__hd { border-bottom: 1px solid var(--hair); }
.ct-slip__x { position: absolute; top: 2px; right: 2px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--ink-2); cursor: pointer; }
.ct-slip__x::before { content: "×"; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--hair); border-radius: 50%; font-size: 18px; line-height: 1; }
.ct-slip__x:hover::before { background: rgba(22,26,43,.06); }
.ct-slips__empty { grid-column: 1 / -1; display: grid; place-items: center; min-height: 320px; border: 1px dashed rgba(22,26,43,.28); border-radius: 6px; font: italic 20px var(--serif); color: var(--ink-2); }
.ct-more { align-self: flex-start; margin-top: 20px; padding: 6px 12px; border: 1px solid rgba(22,26,43,.22); border-radius: 999px; font-size: 13px; font-weight: 650; color: var(--ink-2); }
.ct-more[hidden] { display: none; }

/* the ITC sheet, held to the board by a binder clip */
.ct-sheet { position: relative; align-self: start; margin-top: 14px; padding: 34px 24px 22px; border-radius: 4px; background: var(--sheet); box-shadow: var(--sheet-sh); transform: rotate(.6deg); }
.ct-clip { position: absolute; left: 50%; top: -30px; width: 84px; margin-left: -42px; filter: drop-shadow(0 3px 3px rgba(22,26,43,.3)); }
.ct-sheet__t { color: var(--ink); }
.ct-sheet__rows { margin: 12px 0 0; }
.ct-sheet__rows > div { padding: 9px 0; gap: 12px; border-bottom: 1px solid var(--hair); }
.ct-sheet__rows dt { letter-spacing: .1em; }
.ct-sheet__rows dd { margin: 0; font-size: 15px; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; color: var(--ink); }
.ct-sheet__itc { display: grid; gap: 6px; margin-top: 3px; padding-top: 14px; border-top: 3px double var(--ink); }
.ct-sheet__k { color: var(--ink-2); }
.ct-sheet__big { font-size: clamp(38px, 3.9vw, 60px); font-weight: 500; line-height: 1; letter-spacing: -.01em; color: var(--ink); white-space: nowrap; }
.ct-dl { display: inline-flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; margin-top: 20px; padding: 0 16px; border: 0; border-radius: var(--r-1); background: var(--ink); color: var(--ct-tx); font: 650 14.5px/1 var(--sans); cursor: pointer; transition: transform .16s var(--quart); }
.ct-dl:hover { background: #262b40; }
.ct-dl:active { transform: scale(.98); }
.ct-dl:disabled { opacity: .45; cursor: default; }
.ct-sheet__cap { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--muted-aa); }
.ct-sheet__off { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.ct-sheet__off[hidden] { display: none; }

/* the thumb index: twelve die-cut tabs, April to March */
.ct-tabs { grid-area: 1 / 2; display: grid; gap: 2px; margin: 10px 0 0; padding: 0; list-style: none; }
.ct-tab { display: grid; align-content: center; width: 100%; min-height: 44px; margin-left: -10px; padding: 3px 8px 3px 20px; border: 1px solid #cdb886; border-left: 0; border-radius: 0 10px 10px 0; background: #dfcda8; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transform: translateX(-6px); transition: transform .2s var(--quart); }
.ct-tab__m { font: 520 15px/1.15 var(--serif); }
.ct-tab__n { font-size: 9.5px; letter-spacing: .1em; line-height: 1.3; color: var(--ink-2); }
.ct-tab:not(:disabled):not(.is-ahead):hover { transform: translateX(-2px); }
.ct-tab.is-on { position: relative; z-index: 2; background: #fbf6ea; border-color: var(--ct-edge); box-shadow: 4px 6px 12px -8px rgba(22,26,43,.45); transform: none !important; }
.ct-tab.is-ahead { background: #e6d8b9; color: var(--ink-2); }
.ct-tab.is-ahead .ct-tab__n { font-style: italic; }
.ct-tab.is-ahead, .ct-tab:disabled { cursor: default; }

/* add a bill: a ruled strip */
.ct-add { margin-top: clamp(28px, 3vw, 44px); }
.ct-add__set { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr) minmax(0,.8fr) auto auto; gap: 14px; align-items: end; margin: 0; padding: 20px 0; border: 0; border-block: 1px solid var(--line-hi); }
.ct-add__f > input, .ct-add__f > select, .ct-add__money { width: 100%; min-width: 0; height: 48px; padding: 0 12px; border: 1px solid var(--line-hi); border-radius: var(--r-1); background-color: #fff; color: var(--ink); font: 500 15.5px/1 var(--sans); }
.ct-add__f > select { padding-right: 34px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m7 10 5 5 5-5' fill='none' stroke='%23161a2b' stroke-width='1.8' stroke-linecap='round'/></svg>"); background-size: 18px; }
.ct-add__money { display: flex; align-items: center; gap: 6px; color: var(--ink-2); }
.ct-add__money input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; font: 500 16px/1 var(--sans); color: var(--ink); }
.ct-add__money:focus-within { outline: 2px solid var(--em); outline-offset: 3px; }
.ct-add__money input:focus-visible { outline: none; }
.ct-add__money.is-bad { border-color: var(--ruby); background: #fff6f7; }
.ct-add .seg { height: 48px; padding: 1px; background: #fff; }
.ct-add .seg label { flex: none; }
.ct-add .seg span { min-width: 44px; padding: 0 6px; font-size: 13.5px; }
.ct-add .seg input:checked + span { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-hi); }
.ct-add__go { height: 48px; }
.ct-add__err { margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--ct-err); }
.ct-add__help, .ct-add__full { margin-top: 10px; max-width: 70ch; font-size: 13.5px; line-height: 1.55; color: var(--muted-aa); }
.ct-add__full { color: var(--ink); font-weight: 600; }

/* reports: September as one bar. INV-2026-046 settled at the counter moves it
   (site.js); the segments move on transforms only */
.ct-rep { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); gap: 24px clamp(32px, 5vw, 80px); align-items: end; margin-top: clamp(40px, 4vw, 56px); padding-top: clamp(24px, 2.6vw, 34px); border-top: 1px solid var(--line-hi); }
.ct-rep__say { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 12px; }
.ct-rep__pct { font-size: clamp(56px, 5.2vw, 84px); font-weight: 480; line-height: .9; letter-spacing: -.02em; color: var(--ink); }
.ct-rep__of { font: italic 400 clamp(20px, 1.5vw, 25px)/1.2 var(--serif); color: var(--ink-2); }
.ct-rep__note { max-width: 44ch; margin-top: 14px; font-size: 14px; line-height: 1.55; color: var(--muted-aa); }
.ct-rep.is-moved .ct-rep__note { font-weight: 650; color: var(--em); }
.ct-rep__bar { position: relative; height: 14px; overflow: hidden; border-radius: 3px; background: var(--line); }
.ct-rep__seg { position: absolute; inset: 0; transform-origin: 0 50%; transform: translateX(calc(var(--x) * 1%)) scaleX(calc(var(--w) / 100)); transition: transform .7s var(--expo); }
.ct-rep__seg--in, .ct-rep__sw--in { background: var(--em); }
.ct-rep__seg--later, .ct-rep__sw--later { background: #cdc4ae; }
.ct-rep__seg--over, .ct-rep__sw--over { background: var(--ruby); }
.ct-rep__keys { display: flex; flex-wrap: wrap; gap: 10px clamp(20px, 3vw, 44px); margin: 16px 0 0; }
.ct-rep__keys > div { display: flex; align-items: baseline; gap: 10px; }
.ct-rep__keys dt { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.ct-rep__keys dd { margin: 0; font-size: 23px; font-weight: 480; line-height: 1.1; color: var(--ink); }
.ct-rep__sw { width: 10px; height: 10px; border-radius: 2px; }
.ct-rep.is-settled [data-ct-rep="over"] { color: var(--em); }
.ct-rep__more { margin-top: 14px; max-width: 70ch; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }

/* ================= motion: once, never on re-scroll ================= */
@media (prefers-reduced-motion: no-preference) {
  .ct-gx__field:focus-within .ct-tile.is-caret::before { animation: ct-blink 1s steps(1) infinite; }
  .ct-tile.is-new { animation: ct-drop .42s var(--expo) both; }
  .is-paid .ct-stamp.is-land { animation: ct-stamp .45s var(--expo) both; }
  .ct-slip.is-drop { animation: ct-file .45s var(--expo) both; }
}
@keyframes ct-blink { 50% { opacity: 0; } }
@keyframes ct-drop { from { opacity: .15; transform: translateY(-10px) scale(.94); } }
@keyframes ct-stamp { from { opacity: 0; transform: scale(1.35) rotate(-14deg); } to { opacity: .88; transform: rotate(-8deg); } }
@keyframes ct-file { from { opacity: 0; transform: translateY(-24px) rotate(-3deg); } }

/* ================= without JavaScript: printed samples ================= */
.no-js .ct-gx__in { position: static; display: block; width: 100%; height: 52px; margin-top: 18px; padding: 0 16px; border: 1px solid var(--ct-line); border-radius: 12px; background: var(--ct-well); color: var(--ct-tx); caret-color: auto; opacity: 1; letter-spacing: .12em; }
.no-js .ct-chips, .no-js .ct-copy, .no-js .ct-settle, .no-js .ct-dl, .no-js .ct-add { display: none; }

/* ================= responsive ================= */
@media (max-width: 1100px) {
  .ct-ctl, .ct-chat__cap { grid-template-columns: minmax(0,1fr); }
  .ct-copy { justify-self: start; }
  .ct-add__set { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .ct-add__rate { grid-column: 1 / 3; }
  .ct-file__board { grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); }
}
@media (max-width: 900px) {
  .ct-rep { grid-template-columns: minmax(0,1fr); align-items: start; }
}
@media (max-width: 760px) {
  .ct-glance__list { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ct-glance__item { padding: 18px 14px; }
  .ct-glance__item:nth-child(3)::before { display: none; }
  .ct-glance__item:nth-child(odd) { padding-left: 0; }
  .ct-glance__item:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .ct-glance__t { font-size: 17px; }
  .ct-glance__d { font-size: 13.5px; }
  /* the thumb index becomes a strip of tabs above the board */
  .ct-file, .ct-file__board, .ct-add__set { grid-template-columns: minmax(0,1fr); }
  .ct-tabs, .ct-file__board { grid-area: auto; }
  .ct-tabs { display: flex; gap: 4px; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .ct-tabs::-webkit-scrollbar { display: none; }
  .ct-tabs li { flex: none; scroll-snap-align: start; }
  .no-js .ct-tabs { flex-wrap: wrap; overflow: visible; }
  .ct-tab { width: auto; min-width: 76px; margin: 0; padding: 6px 12px 12px; border: 1px solid #cdb886; border-bottom: 0; border-radius: 10px 10px 0 0; transform: translateY(6px); }
  .ct-tab:not(:disabled):not(.is-ahead):hover { transform: translateY(3px); }
  .ct-file__board { min-height: 0; }
  .ct-slips { gap: 14px 12px; }
  .ct-slip { min-height: 0; padding: 12px 12px 10px; }
  .ct-slip--roll { margin-inline: 0; padding-block: 18px 16px; }
  .ct-slip__hd, .ct-slip__no, .ct-slip__cat { display: none; }
  .ct-slip__sup, .ct-slip--letter .ct-slip__sup { font-size: 15px; }
  .ct-slip__tot { margin-top: 8px; font-size: 19px; }
  .ct-sheet { margin-top: 30px; padding-inline: 18px; transform: none; }
  .ct-dl { justify-content: center; text-align: center; }
  .ct-sheet__big { font-size: 48px; }
  .ct-add__rate { grid-column: auto; }
  .ct-add .seg label { flex: 1; }
  .ct-add__go { width: 100%; }
}
@media (max-width: 720px) {
  .ct-counter { padding-block: 64px; }
  .ct-stn__no { font-size: 48px; }
  /* the reader becomes three rows, each part with its meaning beside it */
  .ct-gx { --tg: 5px; --cols: repeat(10, minmax(0,1fr)); }
  .ct-gx__row { row-gap: 10px; align-items: center; }
  .ct-gx__row > .ct-tile:nth-child(1) { grid-area: 1 / 1; }
  .ct-gx__row > .ct-tile:nth-child(2) { grid-area: 1 / 2; }
  .ct-gx__row > .ct-tile:nth-child(n + 3):nth-child(-n + 12) { grid-row: 2; grid-column: auto; }
  .ct-gx__row > .ct-tile:nth-child(13) { grid-area: 4 / 1; }
  .ct-gx__row > .ct-tile:nth-child(14) { grid-area: 4 / 2; }
  .ct-gx__row > .ct-tile:nth-child(15) { grid-area: 4 / 3; }
  .ct-tile { border-radius: 6px; font-size: clamp(20px, 6vw, 30px); }
  .ct-tile.is-on { box-shadow: inset 0 -2px 0 #e6d6b0, 0 2px 0 rgba(0,0,0,.18), 0 6px 10px -6px rgba(0,0,0,.5); }
  .ct-tile.is-good::after { top: -6px; right: -6px; width: 14px; }
  .ct-echo { display: block; min-width: 0; padding-left: 10px; font: 17px/1.25 var(--serif); color: var(--ct-tx); }
  .ct-echo b { margin-right: 4px; font-size: 10.5px; }
  .ct-echo b + b, .ct-echo--tail b:not(:first-child) { margin-left: 6px; }
  .ct-echo.is-off { opacity: .42; }
  .ct-echo--state { grid-area: 1 / 3 / 2 / 11; }
  .ct-echo--pan { grid-area: 3 / 1 / 4 / 11; padding: 0 0 6px; }
  .ct-echo--tail { grid-area: 4 / 4 / 5 / 11; }
  .ct-gx__read { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ct-gx__foot, .ct-desk__pair { grid-template-columns: minmax(0,1fr); }
  .ct-verdict, .ct-split__says { font-size: 19px; }
  .ct-stn--split { padding-right: 0; }
  .ct-stn--remind { padding-left: 0; border-left: 0; border-top: 1px solid var(--ct-thin); }
  .seg--dark span { padding: 0 2px; font-size: 13.5px; }
  .ct-bill__paper { padding-inline: 18px; }
  .ct-bill__total { font-size: 26px; }
  .ct-stamp { width: 150px; left: calc(42% - 75px); }
  .ct-bubble { max-width: 100%; }
  .ct-settle__row .ct-btn, .ct-copy { width: 100%; }

}
@media (max-width: 600px) {
  .ct-glance { padding: 24px 0 8px; }
  .ct-glance__item { padding: 16px 12px; }
  .ct-glance__d { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ct-rep__keys { gap: 8px 22px; }
  .ct-rep__keys dd { font-size: 20px; }
}
@media (max-width: 360px) {
  .ct-glance__d { font-size: 13px; }
  .ct-gx { --tg: 4px; }
  .ct-tile { font-size: 22px; }
  .ct-slips { grid-template-columns: minmax(0,1fr); }
  .ct-slips > .ct-slip:nth-child(4) { display: none; }
  .seg--dark span { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) { .ct-counter *, .ct-month * { transition: none !important; } }


/* ---------- ak-: ask the app, the empty column ---------- */
/* Hisab Time landing, group g2: 05 Ask the app (#features) and 06 The empty
   column (#privacy). Every class, id, property and keyframe here starts with
   ak-. Motion is transform and opacity only; reduced motion and no-JS states
   are complete and static. */

.ak-ask,
.ak-priv {
  --ak-label: 700 11.5px/1.3 var(--sans);
}

/* =========================================================
   05 ASK THE APP
   ========================================================= */
.ak-ask {
  position: relative;
  padding-block: var(--chapter);
}
.ak-ask__folio {
  margin-bottom: clamp(18px, 2vw, 26px);
}

/* the headline is the question: "Can Hisab Time" is the h2 and the visitor's
   words finish it. Two columns on a grid the rows share: the left holds the
   start of the question, "Try" and the verdict; the right holds the blank,
   the questions to try and the answer. */
.ak-q {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: clamp(18px, 2vw, 30px);
}
.ak-q__line,
.ak-q__try,
.ak-ans {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
}
.ak-q__line {
  align-items: baseline;
}
.ak-q__pre,
.ak-q__in {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 1.25rem + 2.4vw, 3.6rem);
  font-variation-settings: "opsz" 144;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.ak-q__pre {
  margin: 0;
  font-weight: 470;
  white-space: nowrap;
}
.ak-q__pre label {
  cursor: text;
}
.ak-q__nojs {
  display: none;
}
.ak-q__in {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0 2px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: inset 0 -1px 0 var(--ink);
  font-style: italic;
  font-weight: 400;
  caret-color: var(--em);
  -webkit-appearance: none;
  appearance: none;
}
.ak-q__in::placeholder {
  color: var(--muted-aa);
  opacity: 1;
}
.ak-q__in:focus {
  outline: none;
  box-shadow: inset 0 -2px 0 var(--em);
}
.ak-q__in:focus-visible {
  outline: 2px solid var(--em);
  outline-offset: 6px;
  border-radius: 6px;
}

.ak-q__try {
  align-items: baseline;
  margin-top: 14px;
}
.ak-q__try-l,
.ak-tally__l,
.ak-ledger__h,
.ak-meter__l,
.ak-sent__tag,
.ak-ledger__ok {
  font: var(--ak-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ak-q__try-l {
  color: var(--muted-aa);
}
/* no separators to dangle at a line end: a gap does the spacing */
.ak-q__tries {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ak-q__try-b {
  min-height: 44px;
  margin: 0;
  padding: 0 1px;
  border: 0;
  background: none;
  font-family: var(--serif);
  font-size: 18px;
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 24;
  line-height: 1.2;
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line-hi);
  text-underline-offset: 5px;
  white-space: nowrap;
  cursor: pointer;
}
.ak-q__try-b:hover,
.ak-q__try-b.is-asked {
  color: var(--ink);
  text-decoration-color: var(--ink);
}
.ak-q__try-b:focus-visible {
  border-radius: 4px;
}

/* the answer: a ruled row that never changes height. Every answer is laid in
   the same grid cell, so the row is always as tall as the longest one. */
.ak-ans {
  align-items: start;
  margin-top: clamp(18px, 2vw, 26px);
  padding-block: clamp(22px, 2.4vw, 32px);
  border-top: 1px solid var(--line-hi);
  border-bottom: 1px solid var(--line-hi);
}
/* the verdict: one word, set in the display face. Emerald for what the app
   does, ink for what it does not, the quieter ink for "later" and "partly". */
.ak-verdict {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(48px, 4.2vw, 68px);
  font-weight: 480;
  font-variation-settings: "opsz" 144;
  line-height: 0.92;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.ak-verdict--yes,
.ak-verdict--free {
  color: var(--em);
}
.ak-verdict--later,
.ak-verdict--partly {
  color: var(--ink-2);
}
.ak-verdict--none {
  font-style: italic;
  font-weight: 420;
  color: var(--muted-aa);
}
.ak-verdict.is-in {
  animation: ak-in 0.32s var(--quart) both;
}

.ak-ans__stack {
  display: grid;
  min-width: 0;
}
/* the old answer goes at once; the new one settles in, so two never overlap */
.ak-ans__a {
  grid-area: 1 / 1;
  min-width: 0;
  visibility: hidden;
}
.ak-ans__a.is-on {
  visibility: visible;
}
.ak-ans__a.is-in {
  animation: ak-in 0.26s var(--quart) both;
}
@keyframes ak-in {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
}
.ak-ans__t {
  max-width: 52ch;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  font-variation-settings: "opsz" 36;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-wrap: pretty;
}
.ak-ans__t a {
  white-space: nowrap;
}
.ak-ans__l {
  margin-top: 14px;
  line-height: 1.5;
}
/* inline, so a long link wraps like text and the arrow stays on its last word;
   the padding makes every line a 44px target */
.ak-ans__go {
  display: inline;
  margin: 0;
  padding: 12px 0;
  border: 0;
  background: none;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 650;
  line-height: 1.5;
  color: var(--em);
  text-align: left;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(11, 122, 85, 0.35);
  text-underline-offset: 4px;
  cursor: pointer;
}
.ak-ans__go:hover {
  color: #075c40;
  text-decoration-color: currentColor;
}
.ak-ans__go .i {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 6px;
  vertical-align: -3px;
  transition: transform 0.22s var(--quart);
}
.ak-ans__go:hover .i {
  transform: translateX(3px);
}
.ak-ans__go:focus-visible {
  border-radius: 4px;
}

/* ---------- the register: nine accounts, each a run-on index ---------- */
.ak-reg {
  margin-top: clamp(40px, 4vw, 60px);
}
.ak-reg__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 20px;
  margin-bottom: clamp(20px, 2.2vw, 30px);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink);
}
.ak-reg__title {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 450;
  font-variation-settings: "opsz" 72;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.ak-reg__count {
  font-family: var(--serif);
  font-size: 17px;
  font-style: italic;
  font-variation-settings: "opsz" 24;
  color: var(--ink-2);
}
.ak-reg__pages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ak-reg__pages:focus-visible {
  outline-offset: 8px;
}
.ak-reg__page {
  min-width: 0;
  padding-inline: clamp(20px, 2.4vw, 36px);
}
.ak-reg__page:first-child {
  padding-left: 0;
}
.ak-reg__page:last-child {
  padding-right: 0;
}
.ak-reg__page + .ak-reg__page {
  border-left: 1px solid var(--line-hi);
}
.ak-acct {
  break-inside: avoid;
}
.ak-acct + .ak-acct {
  margin-top: 26px;
}
/* an account: its name, a dotted leader to its count */
.ak-acct__h {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 6px;
  font-family: var(--serif);
  line-height: 1.15;
}
.ak-acct__name {
  font-size: 21px;
  font-weight: 470;
  font-variation-settings: "opsz" 36;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.ak-acct__lead {
  flex: 1 1 auto;
  min-width: 16px;
  height: 2px;
  background: radial-gradient(circle, var(--faint) 0.9px, transparent 1.2px) 0 50% / 6px 2px repeat-x;
  transform: translateY(-4px);
}
.ak-acct__n {
  font-size: 15px;
  font-style: italic;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--muted-aa);
}
/* its entries, one to a line, each with its small entry number */
.ak-acct__list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-2);
}
.ak-e {
  display: block;
}
.ak-e:focus {
  outline: none;
}
.ak-e__n {
  position: relative;
  top: -0.45em;
  margin-right: 3px;
  font-family: var(--serif);
  font-size: 10.5px;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--muted-aa);
}
.ak-e__t {
  position: relative;
  display: inline-block;
  max-width: calc(100% - 22px);
  vertical-align: top;
  line-height: 1.35;
  color: var(--ink-2);
}
.ak-e__t::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--em);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.28s var(--quart);
}
.ak-e.is-hit .ak-e__t {
  color: var(--ink);
}
.ak-e.is-hit .ak-e__t::after {
  transform: scaleX(1);
}
/* while a question is asked, the rest steps back to the quieter ink (still AA) */
.ak-reg.is-filtering .ak-e:not(.is-hit) .ak-e__t,
.ak-reg.is-filtering .ak-acct:not(.is-hit) .ak-acct__name {
  color: var(--muted-aa);
}
/* "In the register" from an answer: the line is ringed once */
.ak-e__t::before {
  content: "";
  position: absolute;
  inset: -3px -8px;
  border-radius: 6px;
  box-shadow: 0 0 0 2px var(--em);
  opacity: 0;
  pointer-events: none;
}
.ak-e.is-pulse .ak-e__t::before {
  animation: ak-pulse 1.2s var(--quart) both;
}
.ak-e:focus-visible .ak-e__t::before {
  opacity: 1;
}
.ak-e.is-pulse:focus-visible .ak-e__t::before {
  animation-name: ak-pulse-hold;
}
@keyframes ak-pulse {
  0% { opacity: 0; }
  22% { opacity: 1; }
  62% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes ak-pulse-hold {
  0% { opacity: 0; }
  22% { opacity: 1; }
  100% { opacity: 1; }
}

.ak-reg__pager {
  display: none;
}

/* the tally: the accountant's double rule, then what the register does not hold */
.ak-tally {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 20px;
  margin-top: clamp(24px, 2.6vw, 34px);
  padding-top: 16px;
  background:
    linear-gradient(var(--ink), var(--ink)) 0 0 / 100% 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 0 4px / 100% 1px no-repeat;
}
.ak-tally__l {
  color: var(--muted-aa);
}
.ak-tally__list {
  flex: 1 1 40ch;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-2);
}
.ak-not {
  position: relative;
  white-space: nowrap;
}
.ak-not::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1px;
  height: 2px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.28s var(--quart);
}
.ak-not.is-on {
  color: var(--ink);
}
.ak-not.is-on::after {
  transform: scaleX(1);
}

/* two columns from 761px to 1080px: the accounts flow down and across */
@media (max-width: 1080px) and (min-width: 761px) {
  .ak-reg__pages {
    display: block;
    columns: 2;
    column-gap: clamp(40px, 6vw, 64px);
    column-rule: 1px solid var(--line-hi);
  }
  .ak-reg__page {
    display: contents;
  }
  .ak-acct {
    display: block;
    margin-bottom: 26px;
  }
  .ak-acct + .ak-acct {
    margin-top: 0;
  }
}

/* phones: the question stacks, the register turns into three pages you swipe */
@media (max-width: 760px) {
  .ak-q,
  .ak-q__line,
  .ak-q__try,
  .ak-ans {
    display: block;
  }
  .ak-q__pre,
  .ak-q__in {
    font-size: 30px;
  }
  .ak-q__pre {
    margin-bottom: 2px;
  }
  .ak-q__try {
    margin-top: 16px;
  }
  .ak-q__try-l {
    margin-bottom: 2px;
  }
  .ak-q__tries {
    gap: 0 18px;
  }
  .ak-q__try-b {
    font-size: 17px;
  }
  .ak-verdict {
    margin-bottom: 10px;
    font-size: 44px;
  }
  .ak-ans__t {
    font-size: 19px;
  }
  .ak-ans__l {
    margin-top: 10px;
  }

  .ak-reg__pages {
    display: flex;
    gap: var(--gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .ak-reg__pages::-webkit-scrollbar {
    display: none;
  }
  .ak-reg__page,
  .ak-reg__page:first-child,
  .ak-reg__page:last-child {
    flex: 0 0 100%;
    padding: 0;
    scroll-snap-align: start;
  }
  .ak-reg__page + .ak-reg__page {
    border-left: 0;
  }
  .ak-acct + .ak-acct {
    margin-top: 22px;
  }
  .ak-reg__pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
  }
  .ak-reg__pg {
    flex: 1;
    font: var(--ak-label);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: center;
    color: var(--muted-aa);
  }
  .ak-reg__btn {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--line-hi);
    border-radius: 50%;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
  }
  .ak-reg__btn .i {
    width: 18px;
    height: 18px;
  }
  .ak-reg__btn--prev .i {
    transform: rotate(180deg);
  }
  .ak-reg__btn:disabled {
    opacity: 0.35;
    cursor: default;
  }
}

/* without JavaScript the question is a plain headline and the register is all there */
.no-js .ak-q__line {
  display: block;
}
.no-js .ak-q__pre {
  white-space: normal;
}
.no-js .ak-q__nojs {
  display: inline;
}
.no-js .ak-q__in,
.no-js .ak-q__try,
.no-js .ak-ans,
.no-js .ak-reg__btn {
  display: none;
}
.no-js .ak-reg__pager {
  justify-content: center;
}

/* =========================================================
   06 THE EMPTY COLUMN
   ========================================================= */
.ak-priv {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(72px, 5.4vw, 96px);
  background: var(--night);
  color: #b7bccb;
}
.ak-priv__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink-band);
}
.ak-priv .h2 {
  color: #f6f3ea;
}
.ak-priv .h2 em {
  color: #fbf6ea;
}
.ak-priv a {
  color: #fbf6ea;
  text-decoration-color: rgba(251, 246, 234, 0.4);
}
.ak-priv a:hover {
  color: #fbf6ea;
  text-decoration-color: var(--gold);
}
.ak-priv :focus-visible {
  outline-color: var(--gold);
}
.ak-priv__head {
  margin-bottom: clamp(40px, 4.2vw, 64px);
}
.ak-priv__head .folio {
  margin-bottom: 22px;
}
.ak-priv__lead {
  margin-top: 20px;
  max-width: 46ch;
  font-size: var(--lead-m);
  line-height: 1.6;
  color: #b7bccb;
}
.ak-switch {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: 44px;
  margin: 0;
  padding: 4px 0;
  border: 0;
  background: none;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: #fbf6ea;
  cursor: pointer;
}
.ak-switch:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  border-radius: 10px;
}
.ak-switch__track {
  position: relative;
  flex: none;
  width: 52px;
  height: 30px;
  border: 1px solid rgba(251, 246, 234, 0.14);
  border-radius: 999px;
  background: rgba(251, 246, 234, 0.05);
}
.ak-switch__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fbf6ea;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  transition: transform 0.22s var(--quart);
}
.ak-switch__knob::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--gold);
  opacity: 0;
  transition: opacity 0.22s var(--quart);
}
.ak-switch[aria-checked="true"] .ak-switch__knob {
  transform: translateX(22px);
}
.ak-switch[aria-checked="true"] .ak-switch__knob::after {
  opacity: 1;
}

/* the ledger page: three columns (what stays, the spine, what is sent) on
   rows the two sides share, so every ruled line runs straight across */
.ak-ledger {
  --ak-row: 50px;
  --ak-rule: rgba(251, 246, 234, 0.1);
  --ak-hair: rgba(251, 246, 234, 0.16);
  --ak-spine: 56px;
  --ak-in-l: 22px; /* how far the left side runs into the spine: 4px short of its first hairline */
  --ak-in-r: 21px; /* and the right side, from 4px past its second hairline */
  --ak-pad: 64px;  /* where the sent text starts, measured from the spine's edge */
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--ak-spine) minmax(0, 1fr);
  grid-template-rows: auto repeat(8, minmax(var(--ak-row), auto)) auto;
}
.ak-ledger__col {
  display: grid;
  grid-template-rows: subgrid;
  min-width: 0;
}
.ak-ledger__col--l {
  grid-column: 1;
  grid-row: 1 / span 9;
  margin-right: calc(var(--ak-in-l) * -1);
}
.ak-ledger__col--r {
  grid-column: 3;
  grid-row: 1 / span 9;
  margin-left: calc(var(--ak-in-r) * -1);
}
.ak-ledger__h {
  grid-row: 1;
  align-self: end;
  margin: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ak-hair);
  color: #9aa0b3;
}
/* the right head carries the switch: the column it controls sits right under it */
.ak-ledger__hrow {
  grid-row: 1;
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 20px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ak-hair);
}
.ak-ledger__hrow .ak-ledger__h {
  padding: 0;
  border: 0;
}
.ak-ledger__ok {
  margin-left: 10px;
  color: var(--gold);
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.22s var(--quart), visibility 0s linear 0.22s;
}
.ak-priv.is-off .ak-ledger__ok {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.22s var(--quart), visibility 0s;
}
.ak-ledger__hrow,
.ak-ledger__col--r .ak-sent,
.ak-meter {
  padding-left: calc(var(--ak-pad) + var(--ak-in-r));
}
.ak-ledger__list {
  display: grid;
  grid-template-rows: subgrid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ak-ledger__list--stay {
  grid-row: 2 / span 8;
}
.ak-ledger__list--sent {
  grid-row: 2 / span 3;
}
.ak-ledger__list li,
.ak-ledger__blank span {
  border-bottom: 1px solid var(--ak-rule);
}
.ak-ledger__list--stay li {
  display: flex;
  align-items: center;
  min-width: 0;
  padding-block: 8px;
}
.ak-ledger__t,
.ak-sent__t {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  font-variation-settings: "opsz" 36;
  line-height: 28px;
  letter-spacing: -0.005em;
  color: #f6f3ea;
}
.ak-ledger__t {
  min-width: 0;
}
/* a hairline from the end of each row to the spine, where it stops */
.ak-lead {
  flex: 1 1 auto;
  min-width: 16px;
  height: 1px;
  margin-left: 18px;
  background: #fbf6ea;
  opacity: 0.35;
  transform-origin: 0 50%;
  transition: opacity 0.2s var(--quart);
}
.js .ak-lead {
  transform: scaleX(0);
}
.js .ak-ledger.is-drawn .ak-lead {
  transform: scaleX(1);
  transition: transform 0.5s var(--expo) calc(var(--ak-i, 0) * 50ms), opacity 0.2s var(--quart);
}
@media (hover: hover) and (pointer: fine) {
  .ak-ledger__list--stay li:hover .ak-lead {
    opacity: 0.85;
  }
}

/* the spine: a vertical double hairline, broken once for the lock */
.ak-spine {
  grid-column: 2;
  position: relative;
  --ak-dbl:
    linear-gradient(var(--ak-hair), var(--ak-hair)) calc(50% - 2px) 0 / 1px 100% no-repeat,
    linear-gradient(var(--ak-hair), var(--ak-hair)) calc(50% + 2px) 0 / 1px 100% no-repeat;
}
.ak-spine--a {
  grid-row: 1 / 5;
  background: var(--ak-dbl);
}
.ak-spine--b {
  grid-row: 6 / 10;
  background: var(--ak-dbl);
}
.ak-spine--lock {
  grid-row: 5;
  display: grid;
  place-items: center;
}
.ak-spine--lock::before,
.ak-spine--lock::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  background: var(--ak-dbl);
}
.ak-spine--lock::before {
  top: 0;
  bottom: calc(50% + 16px);
}
.ak-spine--lock::after {
  top: calc(50% + 16px);
  bottom: 0;
}
.ak-spine__i {
  width: 18px;
  height: 18px;
  stroke: var(--gold);
  stroke-width: 1.6;
}

/* what is sent: two rows, each crossed by the only gold hairline on the page */
.ak-sent {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding-block: 8px;
}
.ak-sent__t {
  position: relative;
  display: block;
  transition: opacity 0.22s var(--quart);
}
.ak-cross {
  position: absolute;
  top: 14px;
  /* from the spine's first hairline, across the second, to 12px short of the text */
  left: calc((var(--ak-pad) + var(--ak-spine) / 2 + 2px) * -1);
  width: calc(var(--ak-pad) + var(--ak-spine) / 2 + 2px - 12px);
  height: 1px;
  background: var(--gold);
  transform-origin: 0 50%;
}
.js .ak-cross {
  transform: scaleX(0);
}
.js .ak-ledger.is-drawn .ak-cross {
  transform: scaleX(1);
  transition: transform 0.6s var(--expo) calc(520ms + var(--ak-i, 0) * 90ms);
}
.ak-priv.is-off .ak-cross,
.js .ak-priv.is-off .ak-ledger.is-drawn .ak-cross {
  transform: scaleX(0);
  transition: transform 0.4s var(--expo);
}
/* a cancelled entry, the ledger way: one ruled line across the row */
.ak-strike {
  position: absolute;
  top: 14px;
  left: 0;
  right: 0;
  height: 1px;
  background: #fbf6ea;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.45s var(--expo) 0.1s;
}
.ak-priv.is-off .ak-strike {
  transform: scaleX(1);
}
.ak-sent__s {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 18px;
  color: #9aa0b3;
}
.ak-sent__sub {
  transition: opacity 0.22s var(--quart);
}
.ak-sent__tag {
  display: inline-block;
  margin-left: 6px;
  color: #f6f3ea;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.22s var(--quart), visibility 0s linear 0.22s;
}
.ak-priv.is-off .ak-sent__w,
.ak-priv.is-off .ak-sent .ak-sent__sub {
  opacity: 0.55;
}
.ak-sent__w {
  transition: opacity 0.22s var(--quart);
}
.ak-priv.is-off .ak-sent__tag {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.22s var(--quart), visibility 0s;
}
.ak-ledger__blank {
  grid-row: 5 / span 5;
  display: grid;
  grid-template-rows: subgrid;
}

/* the foot: the right column's total, under a single rule and over a double */
.ak-meter {
  grid-column: 3;
  grid-row: 10;
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 0 0 calc(var(--ak-in-r) * -1);
  padding-top: 14px;
  padding-bottom: 18px;
  background:
    linear-gradient(var(--ak-hair), var(--ak-hair)) 0 calc(100% - 4px) / 100% 1px no-repeat,
    linear-gradient(var(--ak-hair), var(--ak-hair)) 0 100% / 100% 1px no-repeat;
}
.ak-meter__n {
  min-width: 1ch;
  font-family: var(--serif);
  font-size: 72px;
  font-weight: 500;
  font-variation-settings: "opsz" 144;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fbf6ea;
}
.ak-meter__l {
  max-width: 30ch;
  color: #9aa0b3;
}
.ak-ledger__needs {
  grid-column: 1;
  grid-row: 10;
  align-self: start;
  max-width: 46ch;
  padding-top: 18px;
  font-size: 15px;
  line-height: 1.55;
  color: #c9cdd9;
}
.ak-priv__fine {
  max-width: 70ch;
  margin-top: clamp(32px, 3.4vw, 48px);
  font-size: 13.5px;
  line-height: 1.6;
  color: #9aa0b3;
}


/* narrower desktops: shorter rows of text wrap; the shared rows keep both
   sides level */
@media (max-width: 1080px) {
  .ak-ledger {
    --ak-pad: 44px;
  }
  .ak-ledger__t,
  .ak-sent__t {
    font-size: 20px;
    line-height: 26px;
  }
  .ak-cross {
    top: 13px;
  }
}

/* phones: the head stacks, the two sides stack, and the lines become ticks */
@media (max-width: 760px) {
  .ak-priv__head {
    margin-bottom: 36px;
  }
  .ak-ledger {
    --ak-row: 48px;
    --ak-pad: 30px;
    --ak-in-r: 0px;
    display: block;
  }
  .ak-ledger__col--l,
  .ak-ledger__col--r,
  .ak-meter {
    margin-left: 0;
    margin-right: 0;
  }
  .ak-ledger__col,
  .ak-ledger__list,
  .ak-ledger__blank {
    display: block;
  }
  .ak-ledger__list li,
  .ak-ledger__blank span {
    display: flex;
    min-height: var(--ak-row);
  }
  .ak-ledger__t,
  .ak-sent__t {
    font-size: 19px;
    line-height: 25px;
  }
  .ak-lead,
  .js .ak-lead,
  .js .ak-ledger.is-drawn .ak-lead {
    flex: 0 0 14px;
    margin-left: auto;
    margin-right: 0;
    padding-left: 0;
    transform: none;
    transition: none;
  }
  .ak-ledger__t {
    padding-right: 16px;
  }
  .ak-spine--a,
  .ak-spine--b {
    display: none;
  }
  .ak-spine--lock {
    height: 56px;
    margin-block: 8px 20px;
  }
  .ak-spine--lock::before,
  .ak-spine--lock::after {
    --ak-dbl-h:
      linear-gradient(var(--ak-hair), var(--ak-hair)) 0 calc(50% - 2px) / 100% 1px no-repeat,
      linear-gradient(var(--ak-hair), var(--ak-hair)) 0 calc(50% + 2px) / 100% 1px no-repeat;
    top: 0;
    bottom: 0;
    background: var(--ak-dbl-h);
  }
  .ak-spine--lock::before {
    left: 0;
    right: calc(50% + 18px);
  }
  .ak-spine--lock::after {
    left: calc(50% + 18px);
    right: 0;
  }
  .ak-ledger__hrow {
    padding-left: 0;
  }
  .ak-ledger__ok {
    display: block;
    margin: 4px 0 0;
  }
  .ak-sent {
    padding-block: 10px;
  }
  .ak-cross,
  .js .ak-cross,
  .js .ak-ledger.is-drawn .ak-cross {
    top: 12px;
    left: -30px;
    width: 16px;
    transform: none;
    transition: none;
  }
  .ak-strike {
    top: 12px;
  }
  .ak-ledger__blank span:nth-child(n + 4) {
    display: none;
  }
  .ak-meter {
    padding-top: 18px;
  }
  .ak-meter__n {
    font-size: 60px;
  }
  .ak-ledger__needs {
    padding-top: 20px;
  }
}

/* reduced motion: every state is complete and swaps instantly */
@media (prefers-reduced-motion: reduce) {
  .ak-verdict.is-in,
  .ak-ans__a.is-in,
  .ak-e.is-pulse .ak-e__t::before {
    animation: none;
  }
  .ak-e.is-pulse .ak-e__t::before {
    opacity: 1;
  }
  .ak-e__t::after,
  .ak-not::after,
  .ak-switch__knob,
  .ak-switch__knob::after,
  .ak-sent__t,
  .ak-sent__sub,
  .ak-sent__tag,
  .ak-ledger__ok,
  .ak-strike,
  .ak-lead,
  .ak-ans__go .i {
    transition: none !important;
  }
  .js .ak-lead,
  .js .ak-ledger.is-drawn .ak-cross {
    transform: none;
    transition: none !important;
  }
  .js .ak-priv.is-off .ak-ledger.is-drawn .ak-cross {
    transform: scaleX(0);
  }
}


/* ---------- qt-: the quotation, questions, the colophon ---------- */
/* Hisab Time: 07 The quotation, 08 Questions in the order you will have them,
   and the colophon on India time. Prefix qt-. Builds on the site.css tokens.
   Motion: transform and opacity only, ease-out-quart or expo, no bounce. */

:root {
  --qt-sun: #b42a3f;
}

/* small caps labels: 11.5px on the page, 10.5px inside documents */
.qt-doc__meta dt,
.qt-doc__k,
.qt-doc__part,
.qt-tbl thead th,
.qt-packs__k,
.qt-faq__when,
.qt-sheet__top,
.qt-doc__sign p span {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-aa);
}
.qt-faq__when { font-size: 11.5px; }
/* serif faces */
.qt-doc__h, .qt-doc__due dd, .qt-doc__to, .qt-tbl .qt-c-no, .qt-card__t, .qt-doc__grand, .qt-doc__words,
.qt-pack__amt, .qt-pack__last, .qt-rail a, .qt-qa__q, .qt-verdict, .qt-colo__line, .qt-sheet__num, .qt-sheet__wd {
  font-family: var(--serif);
}
.qt-nojs { display: none !important; }
.no-js .qt-nojs { display: block !important; }
.no-js .qt-seg,
.no-js .qt-dial { display: none; }
.qt-price { padding-block: var(--chapter) clamp(40px, 4vw, 64px); }
.qt-faq { padding-block: var(--chapter) clamp(36px, 3.2vw, 48px); }

/* =====================================================================
   07 PRICING: THE QUOTATION
   ===================================================================== */
.qt-price__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px clamp(40px, 4.4vw, 72px);
  align-items: start;
}
.qt-price__lead {
  max-width: 40ch;
  margin-top: 22px;
  font-size: var(--lead-m);
  color: var(--ink-2);
}
.qt-price__cta { margin-top: 24px; }
.qt-price__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.qt-price__micro {
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--muted-aa);
}

/* the credits card: GSTIN auto-fill, prepaid and optional, on its own card, so
   the quotation beside it holds only the plan and its total */
.qt-card {
  margin-top: clamp(32px, 3.4vw, 44px);
  padding: 20px 24px 18px;
  border: 1px solid var(--line-hi);
  border-radius: 6px;
  background: #fbf8f0;
  box-shadow: 0 1px 1px rgba(22, 26, 43, 0.04), 0 16px 32px -24px rgba(22, 26, 43, 0.32);
}
.qt-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1.5px solid var(--ink);
}
.qt-card__t {
  font-size: 20px;
  font-weight: 470;
  font-variation-settings: "opsz" 36;
  line-height: 1.2;
  color: var(--ink);
}
.qt-card .qt-tbl--card { margin-top: 0; }
.qt-card .qt-tbl--card tr {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "item item item" "qty rate amt";
  column-gap: 8px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hair);
}
.qt-card .qt-tbl--card td,
.qt-card .qt-tbl--card tbody th {
  display: block;
  width: auto;
  padding: 0;
  border: 0;
}
.qt-card .qt-tbl--card .qt-c-item { grid-area: item; }
.qt-card .qt-tbl--card .qt-c-qty,
.qt-card .qt-tbl--card .qt-c-rate { margin-top: 12px; text-align: left; white-space: nowrap; color: var(--ink-2); }
.qt-card .qt-tbl--card .qt-c-qty { grid-area: qty; }
.qt-card .qt-tbl--card .qt-c-rate { grid-area: rate; }
.qt-card .qt-tbl--card .qt-c-rate::before { content: "\00d7  "; color: var(--muted-aa); }
.qt-card .qt-tbl--card .qt-c-amt { grid-area: amt; margin-top: 12px; }
.qt-card .qt-tbl--card .qt-c-qty small { display: inline; margin-left: 4px; }
.qt-card .qt-c-save { max-width: 18ch; margin-left: auto; }
.qt-card__note {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted-aa);
}

/* the document, on a pad of two more */
.qt-doc {
  position: relative;
  isolation: isolate;
}
.qt-doc::before,
.qt-doc::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 6px;
  background: #f7f2e6;
  box-shadow: 0 0 0 1px rgba(22, 26, 43, 0.07), 0 20px 40px -28px rgba(22, 26, 43, 0.4);
  transform: translate(10px, 12px) rotate(1.4deg);
}
.qt-doc::after {
  background: #fbf8f0;
  transform: translate(4px, 5px) rotate(0.6deg);
}
.js .qt-doc[data-reveal] { transform: translateY(18px); }
.js .qt-doc[data-reveal].is-in { transform: none; }
.qt-doc__sheet {
  position: relative;
  padding: clamp(24px, 3vw, 42px);
  border-radius: 6px;
  background: var(--sheet);
  box-shadow: 0 0 0 1px rgba(22, 26, 43, 0.06), var(--sheet-sh);
  font-variant-numeric: lining-nums tabular-nums;
}
.qt-doc__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 20px;
  border-bottom: 1.5px solid var(--ink);
}
.qt-doc__brand {
  --wm-a: var(--ink);
  --wm-b: var(--em);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 6px;
}
.qt-doc__tile {
  width: 38px;
  height: 38px;
  border-radius: 24%;
  box-shadow: 0 6px 12px -5px rgba(6, 74, 51, 0.4);
}
.qt-doc__word,
.qt-pad__word {
  width: 104px;
  height: auto;
  overflow: visible;
}
.qt-doc__h {
  font-weight: 460;
  font-variation-settings: "opsz" 144;
  font-size: 58px;
  line-height: 0.86;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.qt-doc__stop { color: var(--gold-tick); }
.qt-doc__meta {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1.15fr 0.9fr;
  margin: 0;
  border-bottom: 1px solid var(--hair);
}
.qt-doc__meta > div { padding: 14px 12px 15px 0; }
.qt-doc__meta > div + div {
  padding-left: 14px;
  border-left: 1px solid var(--hair);
}
.qt-doc__meta dd {
  margin: 6px 0 0;
  font-size: 14.5px;
  font-weight: 650;
  line-height: 1.35;
  color: var(--ink);
}
.qt-doc__due dd {
  font-variation-settings: "opsz" 144;
  font-size: 22px;
  font-weight: 520;
  line-height: 1;
  color: var(--em);
}
.qt-doc__parties {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 20px clamp(24px, 3.4vw, 48px);
  padding: 22px 0 26px;
}
.qt-doc__k {
  display: block;
  margin-bottom: 8px;
}
.qt-doc__pv {
  font-size: 14px;
  line-height: 1.65;
}
.qt-doc__pv strong { font-size: 15px; }
.qt-doc__pv--soft {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted-aa);
}
.qt-doc__to {
  display: block;
  width: 100%;
  height: 44px;
  padding: 0 2px;
  border: 0;
  border-bottom: 1px dashed var(--line-hi);
  border-radius: 0;
  background: transparent;
  font-size: 23px;
  font-weight: 480;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: border-color 0.2s var(--quart);
}
.qt-doc__to::placeholder {
  color: var(--muted);
  font-style: italic;
  font-weight: 400;
  opacity: 1;
}
.qt-doc__to:hover { border-bottom-color: var(--muted); }
.qt-doc__to:focus {
  outline: none;
  border-bottom: 1.5px solid var(--em);
}
.qt-doc__to:focus-visible {
  outline: 2px solid var(--em);
  outline-offset: 3px;
  border-radius: 4px;
}
.qt-doc__part {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--ink);
}
.qt-card__tag {
  flex: none;
  padding: 4px 10px;
  border: 1px solid var(--ink-2);
  border-radius: 999px;
  font-size: 10px;
  line-height: 1.2;
  color: var(--ink-2);
}

/* the table */
.qt-tbl {
  width: 100%;
  margin-top: 12px;
  border-collapse: collapse;
  font-size: 14.5px;
}
.qt-tbl thead th {
  padding: 10px 8px;
  border-bottom: 1px solid var(--ink);
  text-align: left;
}
.qt-tbl td,
.qt-tbl tbody th {
  padding: 15px 8px;
  border-bottom: 1px solid var(--hair);
  font-weight: 400;
  text-align: left;
  vertical-align: top;
  color: var(--ink);
}
.qt-tbl .qt-c-no {
  width: 38px;
  padding-left: 0;
  font-size: 14px;
  color: var(--muted-aa);
}
.qt-tbl thead .qt-c-no {
  font-family: var(--sans);
  font-size: 10.5px;
}
.qt-c-item b {
  display: block;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.4;
  text-wrap: balance;
}
.qt-c-sub {
  display: block;
  max-width: 52ch;
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted-aa);
}
.qt-tbl .qt-c-qty {
  width: 76px;
  text-align: center;
}
.qt-tbl .qt-c-rate {
  width: 84px;
  text-align: right;
  color: var(--ink-2);
}
.qt-tbl .qt-c-amt {
  width: 108px;
  padding-right: 0;
  font-weight: 650;
  text-align: right;
}
.qt-tbl small {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--muted-aa);
}
.qt-tbl small[hidden] { display: none; }
.qt-v { display: inline-block; }
.qt-v.qt-fresh { animation: qt-new 0.26s var(--quart); }
@keyframes qt-new {
  from { opacity: 0.35; transform: translateY(-3px); }
}

/* totals and the stamp */
.qt-doc__total {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: 6px 24px;
  align-items: end;
  padding-top: 20px;
}
.qt-stamp {
  grid-row: 1 / 4;
  align-self: center;
  justify-self: center;
  color: var(--em);
  opacity: 0.88;
  mix-blend-mode: multiply;
  transform: rotate(-9deg);
}
.qt-stamp svg {
  width: clamp(150px, 15vw, 200px);
  height: auto;
}
.qt-stamp__sm {
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 800;
}
.qt-stamp__lg {
  font-family: var(--serif);
  font-variation-settings: "opsz" 72;
  font-style: italic;
  font-size: 54px;
  font-weight: 600;
}
.js .qt-stamp.qt-armed { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .js .qt-stamp.qt-down { animation: qt-stamp 0.6s var(--expo) both; }
}
@keyframes qt-stamp {
  from { opacity: 0; transform: rotate(-14deg) scale(1.4); }
  to { opacity: 0.88; transform: rotate(-9deg) scale(1); }
}
.qt-doc__sum { margin: 0; }
.qt-doc__sum > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
  font-size: 14.5px;
}
.qt-doc__sum dd {
  margin: 0;
  font-weight: 650;
  color: var(--ink);
}
.qt-doc__sum .qt-doc__grand {
  align-items: baseline;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1.5px solid var(--ink);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
}
.qt-doc__grand dd {
  font-variation-settings: "opsz" 144;
  font-size: 54px;
  font-weight: 480;
  line-height: 0.92;
  letter-spacing: -0.02em;
}
.qt-doc__words {
  grid-column: 2;
  font-style: italic;
  font-size: 16.5px;
  text-align: right;
}
/* prices include GST: the tax inside the total, said under it */
.qt-doc__gst {
  grid-column: 2;
  font-size: 13px;
  line-height: 1.5;
  text-align: right;
  color: var(--muted-aa);
}
.qt-doc__gstin {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* part B controls, on paper (the segmented control is the shared .seg) */
.qt-seg {
  display: inline-flex;
  margin-top: 14px;
}
.qt-seg span {
  min-width: 84px;
  padding: 0 16px;
}
.qt-dial {
  display: block;
  max-width: 300px;
  margin-top: 12px;
}
.qt-dial__k {
  display: block;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--ink-2);
}
.qt-dial__r {
  --qt-p: 13.33%;
  display: block;
  width: 100%;
  height: 40px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.qt-dial__r::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--em) var(--qt-p), #e6e0d3 var(--qt-p));
}
.qt-dial__r::-moz-range-track {
  height: 4px;
  border-radius: 4px;
  background: #e6e0d3;
}
.qt-dial__r::-moz-range-progress {
  height: 4px;
  border-radius: 4px;
  background: var(--em);
}
.qt-dial__r::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -10px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px var(--em), 0 4px 10px -2px rgba(22, 26, 43, 0.35);
}
.qt-dial__r::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px var(--em), 0 4px 10px -2px rgba(22, 26, 43, 0.35);
}
.qt-dial__r:focus { outline: none; }
.qt-dial__r:focus-visible {
  outline: 2px solid var(--em);
  outline-offset: 3px;
  border-radius: 6px;
}
.qt-dial__scale {
  display: flex;
  justify-content: space-between;
  margin: -6px 11px 0;
  font-size: 10.5px;
  font-weight: 650;
  color: var(--muted-aa);
}
.qt-dial__scale i {
  display: flex;
  justify-content: center;
  width: 0;
  white-space: nowrap;
}

/* credit packs: measured in months, on a three-year rule */
.qt-packs {
  margin-top: 4px;
  border-bottom: 1px solid var(--hair);
}
.qt-packs__k {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 16px;
  padding-top: 14px;
  color: var(--ink);
}
.qt-packs__at {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--muted-aa);
}
.qt-packs__at b { color: var(--ink); }
.qt-packs__list {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.qt-pack {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "amt last buy" "bonus n buy" "bar bar bar";
  gap: 2px 10px;
  align-items: baseline;
  padding: 9px 0 10px;
  border-top: 1px solid var(--hair);
  font-size: 13.5px;
  color: var(--ink-2);
}
.qt-pack__amt { grid-area: amt; font-size: 19px; font-weight: 520; color: var(--ink); }
.qt-pack__bonus { grid-area: bonus; font-size: 12.5px; font-weight: 650; white-space: nowrap; color: var(--em); }
.qt-pack__n { grid-area: n; justify-self: end; white-space: nowrap; }
.qt-pack__n b { color: var(--ink); }
.qt-pack__last { grid-area: last; font-size: 15.5px; font-weight: 500; white-space: nowrap; text-align: right; color: var(--ink); }
.qt-pack__bonus:empty { display: none; }
/* each pack can be bought right here: a small pill at the end of its row */
.qt-pack__buy {
  grid-area: buy;
  align-self: center;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  height: 34px;
  margin-left: 8px;
  padding: 0 14px;
  border: 1px solid rgba(11, 122, 85, 0.34);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: var(--em);
  text-decoration: none;
  transition: background-color 0.2s var(--quart), border-color 0.2s var(--quart), color 0.2s var(--quart);
}
.qt-pack__buy:hover {
  border-color: var(--em);
  background: var(--tint);
  color: var(--em-deep);
}
/* a 34px pill with a 44px hit area */
.qt-pack__buy::after {
  content: "";
  position: absolute;
  inset: -5px -4px;
}
/* a rule marked in months, a longer mark at each year */
.qt-pack__bar {
  grid-area: bar;
  position: relative;
  margin-top: 4px;
  height: 10px;
  background:
    linear-gradient(90deg, rgba(22, 26, 43, 0.32) 1px, transparent 1px) 0 100% / calc(100% / 3 - 0.34px) 10px repeat-x,
    linear-gradient(90deg, rgba(22, 26, 43, 0.16) 1px, transparent 1px) 0 100% / calc(100% / 36 - 0.03px) 4px repeat-x,
    linear-gradient(rgba(22, 26, 43, 0.18), rgba(22, 26, 43, 0.18)) 0 100% / 100% 1px no-repeat;
  box-shadow: 1px 0 0 0 rgba(22, 26, 43, 0.32);
}
.qt-pack__bar i {
  position: absolute;
  inset: 1px 0 auto;
  height: 5px;
  border-radius: 1px;
  background: var(--em);
  transform-origin: 0 50%;
  transform: scaleX(var(--qt-w, 0));
  transition: transform 0.6s var(--expo);
}

.qt-doc__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px 40px;
  align-items: end;
  margin-top: 28px;
}
.qt-doc__terms {
  max-width: 60ch;
  font-size: 13.5px;
  line-height: 1.6;
}
.qt-doc__sign {
  min-width: 180px;
  text-align: right;
}
.qt-doc__tick {
  position: relative;
  display: block;
  width: 76px;
  height: 46px;
  margin: 0 4px 4px auto;
  transform: rotate(-3deg);
}
.qt-doc__tick svg {
  width: 100%;
  height: 100%;
  fill: var(--gold-tick);
}
/* the cover lifts left to right, so the tick reads as written */
.qt-doc__cover {
  position: absolute;
  inset: -4px -6px;
  background: var(--sheet);
  transform-origin: 100% 50%;
  transform: scaleX(0);
}
.js .qt-doc__sign.qt-armed .qt-doc__cover { transform: scaleX(1); }
.js .qt-doc__sign.qt-signed .qt-doc__cover { transition: transform 0.55s var(--quart) 0.1s; }
.qt-doc__sign p {
  font-size: 13.5px;
  font-weight: 650;
  color: var(--ink);
}
.qt-doc__sign p span {
  display: block;
  margin-top: 6px;
  padding-top: 7px;
  border-top: 1px solid var(--line-hi);
}

/* =====================================================================
   08 QUESTIONS, IN THE ORDER YOU WILL HAVE THEM
   ===================================================================== */
/* the head and the time rail share a left column that stays in view; the answers run beside it */
.qt-faq__side {
  position: sticky;
  top: calc(var(--nav-h) + 32px);
  align-self: start;
}
.qt-faq__lead {
  max-width: 60ch;
  margin-top: 16px;
  font-size: var(--lead-m);
  color: var(--ink-2);
}
.qt-faq__body {
  display: grid;
  grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
}

/* the time rail */
.qt-rail {
  position: relative;
  margin-top: clamp(28px, 3vw, 40px);
}
.qt-rail__list {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
.qt-rail__list::before,
.qt-rail__run {
  content: "";
  position: absolute;
  left: 4px;
  top: 22px;
  width: 1px;
  height: calc(100% - 44px);
  background: var(--line-hi);
}
.qt-rail__list li + li { margin-top: 18px; }
.qt-rail a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 44px;
  font-size: 22px;
  font-style: italic;
  font-weight: 420;
  line-height: 1.15;
  text-decoration: none;
  color: var(--ink-2);
  transition: color 0.26s var(--quart);
}
.qt-rail a:hover,
.qt-rail a.qt-on { color: var(--ink); }
.qt-rail__node {
  position: relative;
  z-index: 1;
  width: 9px;
  height: 9px;
  flex: none;
  border: 1px solid var(--muted);
  border-radius: 50%;
  background: var(--canvas);
}
.qt-rail__node::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: var(--em);
  transform: scale(0);
  transition: transform 0.26s var(--quart);
}
.qt-rail a.qt-on .qt-rail__node { border-color: var(--em); }
.qt-rail a.qt-on .qt-rail__node::after { transform: scale(1); }
/* the run: emerald along the rail, from the first station to the one in view */
.qt-rail__run {
  background: var(--em);
  transform-origin: 50% 0;
  transform: scaleY(var(--qt-run, 0));
  transition: transform 0.26s var(--quart);
}
.qt-faq__group,
.qt-qa { scroll-margin-top: calc(var(--nav-h) + 24px); }
.qt-faq__group + .qt-faq__group { margin-top: 0; border-top: 1px solid var(--line-hi); }
@media (min-width: 761px) {
  .qt-faq__when { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .qt-faq__group:first-child { border-top: 1px solid var(--ink); }
}
.qt-faq__when {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-hi);
  color: var(--ink);
}
.qt-qa {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr);
  gap: 10px clamp(24px, 3vw, 48px);
  padding: 21px 0;
}
.qt-qa + .qt-qa { border-top: 1px solid var(--line); }
.qt-qa__a { line-height: 1.6; }
.qt-qa::before {
  content: "";
  position: absolute;
  inset: 0 -16px;
  z-index: -1;
  border-radius: var(--r-1);
  background: var(--tint);
  opacity: 0;
  pointer-events: none;
}
.qt-qa:target::before { animation: qt-wash 1.4s var(--quart) both; }
@keyframes qt-wash {
  25% { opacity: 1; }
  100% { opacity: 0; }
}
.qt-qa__q {
  font-variation-settings: "opsz" 48;
  font-size: 24px;
  font-weight: 450;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}
/* the verdict is the answer's run-in head: one word in the display italic, then the detail */
.qt-verdict {
  margin-right: 0.12em;
  font-variation-settings: "opsz" 36;
  font-size: 1.3em;
  font-style: italic;
  font-weight: 450;
  line-height: 1;
  color: var(--ink);
}
.qt-qa__a {
  max-width: 60ch;
  font-size: 16px;
  line-height: 1.65;
}

/* =====================================================================
   THE COLOPHON ON INDIA TIME
   ===================================================================== */
.qt-colo {
  padding: clamp(48px, 4.6vw, 72px) 0 clamp(24px, 2.6vw, 36px);
  background: var(--paper);
}
.qt-colo__top {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
.qt-colo__time {
  padding-top: clamp(8px, 2vw, 32px);
}
.qt-colo__line {
  max-width: 18ch;
  font-variation-settings: "opsz" 144;
  font-size: clamp(2.1rem, 1.25rem + 2.4vw, 3.6rem);
  font-weight: 470;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.qt-colo__line em {
  font-style: italic;
  font-weight: 420;
  color: var(--em);
  font-variant-numeric: lining-nums tabular-nums;
}
.qt-colo__due {
  max-width: 52ch;
  margin-top: 20px;
  font-size: var(--lead-m);
  color: var(--ink-2);
}
.qt-colo__fine {
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted-aa);
}

/* the tear-off pad */
.qt-pad {
  position: relative;
  width: 312px;
}
.qt-pad__bind {
  --wm-a: var(--ivory);
  --wm-b: var(--gold);
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 44px;
  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(180deg, #1d2236, #11141f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 16px -12px rgba(10, 12, 20, 0.7);
}
.qt-pad__tile {
  width: 22px;
  height: 22px;
  border-radius: 24%;
}
.qt-pad__word { width: 92px; }
.qt-pad__eye {
  position: absolute;
  top: 17px;
  left: 18px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--gold-deep);
  border-radius: 50%;
  background: #090b12;
}
.qt-pad__eye:last-child {
  left: auto;
  right: 18px;
}
/* the torn sheet falls inside this clip: it fades out before it can reach the links below */
.qt-pad__stack {
  position: relative;
  display: grid;
  margin: 0 8px;
  overflow: clip;
  overflow-clip-margin: 80px;
}
/* the sheets to come, peeking below */
.qt-pad__stack::before,
.qt-pad__stack::after {
  content: "";
  position: absolute;
  inset: 0 2px -3px;
  z-index: -1;
  border-radius: 0 0 6px 6px;
  background: #efe5cc;
}
.qt-pad__stack::after {
  inset: 0 4px -6px;
  z-index: -2;
  background: #e6d6b0;
  box-shadow: var(--sheet-sh);
}
.qt-sheet {
  position: relative;
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  padding: 18px 22px 16px;
  border-radius: 0 0 6px 6px;
  background: var(--ivory-face);
  box-shadow: inset 0 0 0 1px rgba(22, 26, 43, 0.05), inset 0 -3px 0 #e6d6b0;
  color: var(--ink);
  transform-origin: 100% 0;
}
/* the perforation it tears along */
.qt-sheet::before {
  content: "";
  position: absolute;
  inset: 4px 8px auto;
  height: 2px;
  background: radial-gradient(circle, var(--line-hi) 1px, transparent 1.2px) 0 50% / 6px 2px repeat-x;
}
.qt-sheet.qt-tearing {
  z-index: 4;
  box-shadow: inset 0 0 0 1px rgba(22, 26, 43, 0.06), inset 0 -3px 0 #e6d6b0, 0 24px 40px -18px rgba(22, 26, 43, 0.4);
  pointer-events: none;
}
.qt-sheet__top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
  font-size: 10px;
  letter-spacing: 0.1em;
  white-space: nowrap;
  color: var(--ink-2);
}
.qt-sheet__top span + span { color: var(--muted-aa); }
.qt-sheet__num {
  margin: 16px 0 10px;
  font-variation-settings: "opsz" 144;
  font-size: 168px;
  font-weight: 480;
  line-height: 0.9;
  letter-spacing: -0.03em;
  font-variant-numeric: lining-nums tabular-nums;
  text-align: center;
}
.qt-sheet__wd {
  min-height: 46px;
  font-size: 21px;
  font-style: italic;
  font-weight: 430;
  line-height: 1.1;
  text-align: center;
}
.qt-sheet__hi {
  display: block;
  margin-top: 4px;
  font-family: var(--deva);
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  color: var(--muted-aa);
}
.qt-sheet.qt-sun .qt-sheet__num,
.qt-sheet.qt-sun .qt-sheet__wd,
.qt-sheet.qt-sun .qt-sheet__hi { color: var(--qt-sun); }
.qt-sheet__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(22, 26, 43, 0.12);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
}
.qt-sheet__ring {
  width: 12px;
  height: 12px;
  flex: none;
  border: 2px solid var(--gold-tick);
  border-radius: 50%;
}
.qt-sheet__ring.qt-due { background: var(--gold); }

/* the grid, the bar */
.qt-colo__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin-top: clamp(36px, 3.6vw, 52px);
  padding-top: clamp(24px, 2.6vw, 34px);
  border-top: 1px solid var(--line-hi);
}
.qt-colo__col h2 {
  margin: 6px 0 18px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.qt-colo__col ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.qt-colo__col a {
  font-size: 14.5px;
  color: var(--ink-2);
  text-decoration: none;
}
.qt-colo__col a:hover {
  color: var(--em);
  text-decoration: underline;
}
.qt-colo__bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 32px;
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted-aa);
}

/* =====================================================================
   reduced motion
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .js .qt-doc[data-reveal] { transform: none; }
  .qt-pack__bar i,
  .qt-rail__run,
  .qt-rail__node::after,
  .js .qt-doc__sign.qt-signed .qt-doc__cover { transition: none; }
  .js .qt-doc__sign .qt-doc__cover { transform: scaleX(0); }
  .qt-v.qt-fresh { animation: none; }
  .qt-qa:target::before { animation: none; opacity: 1; }
}

/* =====================================================================
   responsive
   ===================================================================== */
@media (max-width: 1100px) {
  /* one column: the head, the quotation, its buttons under the totals, then the credits card */
  .qt-price__grid { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .qt-price__side { display: contents; }
  .qt-doc { order: 1; width: 100%; max-width: 780px; margin: 40px auto 0; }
  .qt-price__cta { order: 2; width: 100%; max-width: 780px; margin: 32px auto 0; }
  .qt-card { order: 3; width: 100%; max-width: 780px; margin: 40px auto 0; }
  .qt-qa {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  }
  .qt-faq__body { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .qt-faq__side { position: static; margin-bottom: clamp(28px, 3vw, 40px); }
  .qt-rail { display: none; }
}
@media (max-width: 1000px) and (min-width: 761px) {
  /* the colophon's link columns beside the pad: two, with the contact column
     across both, so the email address never runs off the page */
  .qt-colo__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .qt-colo__col:last-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  /* pricing: the bill folds to a phone */
  .qt-card { padding-inline: 18px; }
  .qt-price__btns .btn { flex: 1 1 auto; }
  .qt-doc::before { transform: translate(4px, 9px) rotate(1.4deg); }
  .qt-doc::after { transform: translate(2px, 4px) rotate(0.6deg); }
  .qt-doc__top { align-items: center; }
  .qt-doc__word { display: none; }
  .qt-doc__h { font-size: 48px; }
  .qt-doc__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qt-doc__meta > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .qt-doc__meta > div:nth-child(n + 3) { border-top: 1px solid var(--hair); }
  .qt-doc__parties { grid-template-columns: minmax(0, 1fr); }
  .qt-tbl thead { display: none; }
  .qt-tbl tr {
    display: grid;
    grid-template-columns: 28px auto minmax(0, 1fr) auto;
    column-gap: 8px;
    padding: 16px 0;
    border-bottom: 1px solid var(--hair);
  }
  .qt-tbl tbody tr:first-child { border-top: 1px solid var(--ink); }
  .qt-tbl td,
  .qt-tbl tbody th {
    display: block;
    width: auto !important;
    padding: 0;
    border: 0;
  }
  .qt-tbl .qt-c-no { grid-row: 1 / 3; padding-top: 2px; }
  .qt-tbl .qt-c-item { grid-column: 2 / 5; }
  .qt-tbl .qt-c-qty,
  .qt-tbl .qt-c-rate { grid-column: 2; margin-top: 12px; text-align: left; color: var(--ink-2); }
  .qt-tbl .qt-c-rate { grid-column: 3; white-space: nowrap; }
  .qt-tbl .qt-c-amt { grid-column: 4; margin-top: 12px; }
  .qt-tbl .qt-c-rate::before { content: "× "; color: var(--muted-aa); }
  .qt-tbl .qt-c-qty small { display: inline; margin-left: 4px; }
  .qt-c-save { max-width: 13ch; margin-left: auto; }
  .qt-dial { max-width: none; }
  .qt-doc__total { grid-template-columns: minmax(0, 1fr); padding-top: 12px; }
  .qt-stamp { position: absolute; left: -6px; top: 4px; }
  .qt-stamp svg { width: 128px; }
  .qt-doc__sum > div:not(.qt-doc__grand) { padding-left: 46%; }
  .qt-doc__sum .qt-doc__grand { margin-top: 28px; }
  .qt-doc__grand dd { font-size: 46px; }
  .qt-doc__words { grid-column: 1; }
  .qt-doc__gst { grid-column: 1; }
  .qt-packs__k { flex-direction: column; }
  .qt-packs__list { display: block; }
  .qt-pack,
  .qt-pack:first-child,
  .qt-pack:last-child {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "amt last buy" "bonus n buy" "bar bar bar";
    gap: 4px 12px;
    padding: 14px 0 16px;
  }
  .qt-pack + .qt-pack { border-left: 0; border-top: 1px solid var(--hair); }
  .qt-pack__last,
  .qt-pack__n { text-align: right; }
  .qt-pack__bar { margin-top: 8px; }
  .qt-doc__foot { grid-template-columns: minmax(0, 1fr); }
  .qt-doc__sign { text-align: left; }
  .qt-doc__tick { margin-left: 0; }

  /* questions */
  .qt-faq__head,
  .qt-faq__body,
  .qt-qa { grid-template-columns: minmax(0, 1fr); }
  .qt-rail { display: none; }
  .qt-qa { gap: 8px; padding: 22px 0; }
  .qt-qa__q { font-size: 21px; }
  .qt-qa__a { margin-top: 2px; font-size: 16px; }
  .qt-qa::before { inset: 0 -10px; }

  /* colophon */
  .qt-colo__top { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .qt-pad { justify-self: center; width: 248px; }
  .qt-pad__stack { overflow-clip-margin: 24px; }
  .qt-pad__eye { left: 14px; }
  .qt-pad__eye:last-child { right: 14px; }
  .qt-pad__word { width: 84px; }
  .qt-sheet__num { margin-top: 10px; font-size: 128px; }
  .qt-sheet__top { flex-direction: column; align-items: center; gap: 3px; }
  .qt-colo__line { font-size: 34px; }
  .qt-colo__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .qt-colo__col:last-child { grid-column: 1 / -1; }
  .qt-colo__bar { flex-direction: column; }
  .qt-colo__addr span { display: block; }
  .qt-colo__dot { display: none !important; }
}
@media (max-width: 380px) {
  .qt-doc__h { font-size: 40px; }
  .qt-doc__grand dd { font-size: 40px; }
  .qt-doc__meta > div { padding-right: 8px; }
  .qt-doc__meta > div + div { padding-left: 10px; }
  .qt-seg span { min-width: 0; padding: 0 12px; }
  .qt-tbl tr { grid-template-columns: 24px auto minmax(0, 1fr) auto; }
}
@media (pointer: coarse) {
  .qt-colo__col ul { gap: 0; }
  .qt-colo__col a { display: inline-block; padding-block: 10px; }
}


/* ---------- seams: where the new chapters meet the approved sections ---------- */
/* the invoice designs end on their own short padding; the emerald band starts on
   paper at the same distance as the chapter that used to follow them. Over the
   band the bar turns dark through the .ink-band hook it already watches. */
.ct-counter {
  margin-top: clamp(48px, 4.8vw, 80px);
}
/* two chapters on the same paper: the accountant's closing double rule between
   them, in place of a screen of empty paper */
.ct-month + .ak-ask,
.qt-price + .qt-faq {
  padding-top: 0;
}
.ct-month + .ak-ask > .shell::before,
.qt-price + .qt-faq > .shell::before {
  content: "";
  display: block;
  height: 5px;
  margin-bottom: clamp(40px, 4vw, 64px);
  background:
    linear-gradient(var(--line-hi), var(--line-hi)) 0 0 / 100% 1px no-repeat,
    linear-gradient(var(--line-hi), var(--line-hi)) 0 4px / 100% 1px no-repeat;
}

/* ---------- phones: the same tools, less scrolling ---------- */
@media (max-width: 760px) {
  /* the questions to try run on one line you can swipe */
  .ak-q__tries {
    flex-wrap: nowrap;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    overflow-x: auto;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .ak-q__tries::-webkit-scrollbar {
    display: none;
  }
  .ak-q__tries li {
    flex: none;
  }
  /* privacy: one empty row is enough to show the column stays empty */
  .ak-ledger {
    --ak-row: 44px;
  }
  .ak-ledger__blank span:nth-child(n + 2) {
    display: none;
  }
  /* month close: the supplier's state and the amount share a row */
  .ct-add__set {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .ct-add__f--sup,
  .ct-add__rate,
  .ct-add__go {
    grid-column: 1 / -1;
  }
  /* questions: a little tighter */
  .qt-qa {
    padding: 18px 0;
  }
  /* footer: the product links repeat the menu at the top, so phones keep the rest */
  .qt-colo__col[aria-labelledby="qt-foot-product"] {
    display: none;
  }
  .qt-colo__col:last-child {
    grid-column: auto;
  }
}
@media (max-width: 760px) {
  /* the sample GSTINs run on one line you can swipe */
  .ct-chips {
    flex-wrap: nowrap;
    width: calc(100% + var(--gutter) * 2);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .ct-chips::-webkit-scrollbar {
    display: none;
  }
  .ct-chip {
    flex: none;
  }
  .qt-doc__pv--soft {
    display: none;
  }
}
/* without JavaScript the offline switch would do nothing, so it is not shown */
.no-js .ak-switch {
  display: none;
}

/* =====================================================================
   DOWNLOAD (/download/): the app file on a slip of paper, like the
   quotation, then how to install it from outside Google Play. Prefix dl-.
   site.js fills the slip from /download/latest.json and sets
   data-dl-state: loading, ready or wait. Without JavaScript the slip
   shows a plain link to the stable copy of the latest file.
   ===================================================================== */
.dl-top {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(var(--nav-h) + clamp(36px, 5.6vw, 88px)) 0 clamp(48px, 6vw, 96px);
}
/* the hero's aurora, faded out by the bottom of this section, not cut by it */
.dl-top .hero__bg {
  inset: 0;
}
.dl-top__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  gap: 48px clamp(40px, 5vw, 88px);
  align-items: center;
}
.dl-title {
  font-size: clamp(2.75rem, 1rem + 4vw, 4.9rem);
  line-height: 0.98;
  text-wrap: balance;
}
.dl-lead {
  max-width: 520px;
  margin-top: 22px;
}
.dl-facts {
  display: grid;
  gap: 12px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.dl-facts li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink-2);
}
.dl-facts .i {
  color: var(--em);
}

/* the slip, on a pad of two more sheets */
.dl-slip {
  position: relative;
  isolation: isolate;
  width: 100%;
}
.dl-slip::before,
.dl-slip::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 6px;
  background: #f7f2e6;
  box-shadow: 0 0 0 1px rgba(22, 26, 43, 0.07), 0 20px 40px -28px rgba(22, 26, 43, 0.4);
  transform: translate(9px, 11px) rotate(1.3deg);
}
.dl-slip::after {
  background: #fbf8f0;
  transform: translate(4px, 5px) rotate(0.6deg);
}
.dl-slip__sheet {
  position: relative;
  padding: clamp(22px, 2.6vw, 34px);
  border-radius: 6px;
  background: var(--sheet);
  box-shadow: 0 0 0 1px rgba(22, 26, 43, 0.06), var(--sheet-sh);
  font-variant-numeric: lining-nums tabular-nums;
}
.dl-slip__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1.5px solid var(--ink);
}
.dl-slip__brand {
  --wm-a: var(--ink);
  --wm-b: var(--em);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.dl-slip__tile {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 24%;
  box-shadow: 0 6px 12px -5px rgba(6, 74, 51, 0.4);
}
.dl-slip__word {
  display: block;
  width: 98px;
  height: auto;
  overflow: visible;
}
.dl-slip__app {
  display: block;
  margin-top: 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--muted-aa);
}
.dl-slip__h {
  flex: none;
  font-family: var(--serif);
  font-size: clamp(34px, 3.2vw, 46px);
  font-weight: 460;
  font-variation-settings: "opsz" 144;
  line-height: 0.9;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.dl-slip__stop {
  color: var(--gold-tick);
}

/* one part of the slip at a time */
.dl-part {
  display: none;
}
.no-js .dl-part[data-dl-part="nojs"],
.js .dl[data-dl-state="loading"] .dl-part[data-dl-part="load"],
.js .dl[data-dl-state="ready"] .dl-part[data-dl-part="ready"],
.js .dl[data-dl-state="wait"] .dl-part[data-dl-part="wait"] {
  display: block;
}

.dl-meta {
  display: grid;
  grid-template-columns: 0.9fr 0.9fr 1.3fr 1fr;
  margin: 0;
  border-bottom: 1px solid var(--hair);
}
.dl-meta > div {
  min-width: 0;
  padding: 14px 10px 15px 0;
}
.dl-meta > div + div {
  padding-left: 12px;
  border-left: 1px solid var(--hair);
}
.dl-meta dt,
.dl-sha__k,
.dl-new__k {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--muted-aa);
}
.dl-meta dd {
  margin: 6px 0 0;
  font-size: 14.5px;
  font-weight: 650;
  line-height: 1.35;
  color: var(--ink);
}
.dl-btn {
  width: 100%;
  margin-top: 22px;
}
.dl-btn > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* the arrow of a download points down, so it nods down, not sideways */
.dl-btn:hover .i {
  transform: translateY(2px);
}
.dl-slip__file {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  color: var(--muted-aa);
  overflow-wrap: anywhere;
}
.dl-slip__hint {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--tint);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--em-deep);
}
.dl-slip__hint[hidden] {
  display: none;
}

/* the fingerprint, torn off along a dashed line */
.dl-sha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "k copy" "v v";
  align-items: center;
  gap: 10px 12px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px dashed var(--line-hi);
}
.dl-sha__k {
  grid-area: k;
}
.dl-sha__v {
  grid-area: v;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f5f0e4;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--ink);
  overflow-wrap: anywhere;
  word-break: break-all;
  user-select: all;
}
.dl-copy {
  grid-area: copy;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line-hi);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
  cursor: pointer;
  transition: color 0.2s var(--quart), border-color 0.2s var(--quart), background-color 0.2s var(--quart);
}
.dl-copy:hover {
  border-color: var(--muted);
  color: var(--ink);
}
.dl-copy.is-done {
  border-color: rgba(11, 122, 85, 0.4);
  color: var(--em);
}
.dl-copy .i {
  width: 16px;
  height: 16px;
}
/* a 32px pill with a 44px hit area */
.dl-copy::after {
  content: "";
  position: absolute;
  inset: -6px -4px;
}
.dl-new {
  margin-top: 20px;
}
.dl-new[hidden] {
  display: none;
}
.dl-new__list {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.55;
}
.dl-new__list li + li {
  margin-top: 4px;
}

/* waiting, and "being prepared" */
.dl-slip__wait {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.dl-spin {
  width: 18px;
  height: 18px;
  flex: none;
  border: 2px solid var(--line-hi);
  border-top-color: var(--em);
  border-radius: 50%;
  animation: dl-spin 0.9s linear infinite;
}
@keyframes dl-spin {
  to { transform: rotate(360deg); }
}
.dl-slip__fine {
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted-aa);
}
.dl-slip__soon {
  margin-top: 26px;
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 470;
  font-variation-settings: "opsz" 72;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.dl-slip__soon-t {
  margin-top: 10px;
  font-size: 15.5px;
  line-height: 1.6;
}

/* the guide: a ruled ledger of rows, the heading on the left, the detail on the right */
.dl-guide {
  padding: clamp(16px, 2vw, 32px) 0 clamp(40px, 5vw, 72px);
}
.dl-row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 28px clamp(40px, 5vw, 88px);
  padding-block: clamp(40px, 4.4vw, 64px);
  border-top: 1px solid var(--line-hi);
}
.dl-row:first-child {
  border-top: 0;
}
.dl-row__lead {
  max-width: 44ch;
  margin-top: 16px;
  font-size: var(--lead-m);
  color: var(--ink-2);
}
.dl-row__body {
  max-width: 62ch;
  font-size: 16.5px;
}
.dl-row__body p + p {
  margin-top: 14px;
}
.dl-row__body .dl-row__aside {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 15.5px;
}
.dl-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 650;
  color: var(--em);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(11, 122, 85, 0.35);
  text-underline-offset: 3px;
  cursor: pointer;
}
.dl-link:hover {
  color: #075c40;
  text-decoration-color: currentColor;
}
.no-js .dl-link {
  display: none;
}

/* four steps, numbered like ledger folios */
.dl-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: dl;
}
.dl-steps li {
  counter-increment: dl;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.dl-steps li:first-child {
  padding-top: 2px;
}
.dl-steps li:last-child {
  border-bottom: 0;
}
.dl-steps li::before {
  content: counter(dl, decimal-leading-zero);
  grid-row: 1 / 3;
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 440;
  font-variation-settings: "opsz" 144;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--em);
}
.dl-steps h3 {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
}
.dl-steps p {
  margin-top: 6px;
  font-size: 15.5px;
  line-height: 1.6;
}

/* Play Protect: said plainly, on a gold-edged note */
.dl-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin-bottom: clamp(8px, 2vw, 16px);
  padding: clamp(20px, 2.4vw, 30px);
  border: 1px solid #ecdcb0;
  border-radius: var(--r-2);
  background: #fbf4e2;
}
.dl-note__i {
  width: 26px;
  height: 26px;
  margin-top: 2px;
  color: var(--gold-deep);
}
.dl-note__h {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 480;
  font-variation-settings: "opsz" 36;
  color: var(--ink);
}
.dl-note p {
  max-width: 82ch;
  margin-top: 6px;
  font-size: 15.5px;
  line-height: 1.6;
}

/* the checksum commands, on ink */
.dl-cmds {
  display: grid;
  align-content: start;
  gap: 14px;
}
.dl-cmd {
  padding: 16px 18px;
  border-radius: var(--r-1);
  background: var(--night);
}
.dl-cmd__k {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9aa0b3;
}
.dl-cmd__v {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.dl-cmd__v code {
  font: inherit;
  color: #f6f3ea;
}
.dl-cmds__fine {
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted-aa);
}

/* more than 2 invoices: Pro, on the ink band */
.dl-pro {
  padding-bottom: clamp(56px, 6vw, 96px);
}
.dl-pro__panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  padding: clamp(28px, 4vw, 56px);
  border-radius: var(--band-r);
  background: var(--ink-band);
  color: #c9cdd9;
}
.dl-pro__h {
  font-family: var(--serif);
  font-size: clamp(28px, 1.3rem + 1.4vw, 42px);
  font-weight: 470;
  font-variation-settings: "opsz" 144;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #f6f3ea;
  text-wrap: balance;
}
.dl-pro__h em {
  font-style: italic;
  background: linear-gradient(180deg, #f8d77f, #e0a93a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.06em;
}
.dl-pro__t {
  max-width: 52ch;
  margin-top: 10px;
}
.dl-pro__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
}
.dl-pro__alt {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ivory);
  text-decoration-color: rgba(251, 246, 234, 0.4);
}
.dl-pro__alt:hover {
  color: #fff;
}
.dl-pro .btn--ivory:focus-visible,
.dl-pro__alt:focus-visible {
  outline-color: var(--gold);
}

@media (prefers-reduced-motion: reduce) {
  .dl-spin {
    animation: none;
  }
}
@media (max-width: 1000px) {
  .dl-top__grid,
  .dl-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .dl-slip {
    max-width: 560px;
  }
}
@media (max-width: 600px) {
  .dl-top {
    padding-top: calc(var(--nav-h) + 28px);
  }
  .dl-title {
    font-size: clamp(2.4rem, 1.2rem + 6vw, 3rem);
  }
  .dl-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dl-meta > div:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
  .dl-meta > div:nth-child(n + 3) {
    border-top: 1px solid var(--hair);
  }
  .dl-slip::before {
    transform: translate(4px, 9px) rotate(1.4deg);
  }
  .dl-slip::after {
    transform: translate(2px, 4px) rotate(0.6deg);
  }
  .dl-steps li {
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 12px;
  }
  .dl-steps li::before {
    font-size: 28px;
  }
  .dl-note {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .dl-pro__ctas,
  .dl-pro__ctas .btn {
    width: 100%;
  }
  .dl-pro__ctas {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
}
@media (max-width: 440px) {
  /* "Download Hisab Time" says enough on a narrow phone */
  .dl-btn__for {
    display: none;
  }
  .dl-btn {
    padding: 0 18px;
    font-size: 15.5px;
  }
  .dl-slip__app {
    display: none;
  }
}