/* ==========================================================================
   aczen.live product pages: extras on top of pages.css
   Used by the seven product pages (accounting, B2B payments, GST, banking,
   expense management, cash flow insights, agentic AI). Only components
   pages.css doesn't provide live here; nothing here redefines a pages.css
   or styles.css class, it only adds modifiers and new names.
   Orange stays reserved for "due / needs action"; none is used below.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Breadcrumb (aczen.in shows "Home / Page" above the hero)
   -------------------------------------------------------------------------- */

/* Breadcrumb row sits tight above the hero so it reads as location, not content */
.crumbs {
  padding-top: 24px; /* clears the sticky header without adding a full section gap */
  font-size: 0.875rem; /* small: it is wayfinding, not reading */
  color: var(--ink-soft); /* secondary text, 7.6:1 on white */
}

/* The list itself: inline items with a slash between them */
.crumbs ol {
  display: flex; /* items on one line */
  flex-wrap: wrap; /* long product names wrap instead of overflowing at 360px */
  gap: 8px; /* space around the separator */
  margin: 0; /* ol default margin would push the hero down */
  padding: 0; /* ol default indent */
  list-style: none; /* the slash is the separator, not a number */
}

/* Slash separator drawn in CSS so screen readers don't announce "slash" */
.crumbs li + li::before {
  content: "/"; /* same separator aczen.in uses */
  margin-right: 8px; /* matches the flex gap on the other side */
  color: var(--rule); /* faint, so the page names lead */
}

/* Breadcrumb links stay quiet until hovered */
.crumbs a {
  color: var(--ink-soft); /* same tone as the rest of the row */
  text-decoration: none; /* a row of underlines would be noisy */
}

/* Hover restores the underline as the link cue */
.crumbs a:hover {
  color: var(--ink); /* darkens on hover */
  text-decoration-line: underline; /* non-colour cue */
}

/* The hero loses some top padding when a breadcrumb already provides space above it */
.crumbs + .page-hero {
  padding-top: 24px; /* breadcrumb and hero read as one block */
}

/* --------------------------------------------------------------------------
   2. Product name above the h1 (aczen.in's hero chip, kept as plain text)
   -------------------------------------------------------------------------- */

/* Names the product when the headline itself doesn't, e.g. "Track & control every rupee of spend." */
.product-kicker {
  margin-bottom: 14px; /* ties it to the heading below */
  font-size: 0.9375rem; /* small, but not a tracked caps label */
  font-weight: 600; /* firm enough to read as a name */
  color: var(--brand); /* brand blue marks it as the product, 5.4:1 on white */
}

/* A kicker inside a tinted section keeps its contrast */
.page-section-alt .product-kicker {
  color: var(--brand-hover); /* smebank-700 stays above 6:1 on smebank-50 */
}

/* --------------------------------------------------------------------------
   3. Hero product panel (aczen.in's hero card: product, first three features, lead stat)
   -------------------------------------------------------------------------- */

/* White panel, top radius tier, like the home page's filing card */
.product-panel {
  position: relative; /* anchor for the lead stat tab */
  margin: 0; /* figure default margins would push it off-column */
  padding: 24px; /* inner margin */
  background: var(--paper); /* white sheet */
  border: 1px solid var(--rule); /* the edge carries it, no blur shadow */
  border-radius: var(--radius-lg); /* panel tier: ranks above cards and tables */
  box-shadow: 0 1px 0 var(--rule); /* hard page-edge underline, same device as .filing-card */
}

/* Panel header: product name and "Powered by Aczen" */
.product-panel-head {
  padding-bottom: 16px; /* space above the rule */
  border-bottom: 1px solid var(--rule); /* separates the name from the checklist like a ledger heading */
}

/* Product name in the panel */
.product-panel-name {
  font-weight: 700; /* leads the panel */
  color: var(--ink); /* primary */
}

/* Attribution line under the name */
.product-panel-by {
  margin-top: 2px; /* tucked under the name */
  font-size: 0.875rem; /* small */
  color: var(--ink-soft); /* secondary */
}

/* The three feature ticks reuse .ticks, but the first rule would double the head rule */
.product-panel .ticks {
  margin-top: 4px; /* tight under the head */
}

/* First tick line drops its top rule because the header already draws one */
.product-panel .ticks li:first-child {
  border-top: 0; /* avoids a doubled line */
}

/* Lead stat under the checklist, as aczen.in's floating stat card */
.product-panel-stat {
  display: flex; /* value and label on one baseline */
  flex-wrap: wrap; /* wraps on narrow phones */
  align-items: baseline; /* label sits on the number's baseline */
  gap: 4px 10px; /* row gap when wrapped, space between otherwise */
  margin-top: 16px; /* separates it from the checklist */
  padding: 14px 16px; /* inner margin */
  background: var(--paper-deep); /* tinted tab so the number reads as a separate fact */
  border-radius: var(--radius-md); /* middle tier inside the larger panel */
}

/* The stat number itself */
.product-panel-stat strong {
  font-size: 1.6rem; /* big enough to be the panel's single emphasis */
  font-variation-settings: "opsz" 32; /* display cut, like the headings */
  font-weight: 800; /* heavy */
  line-height: 1; /* no extra height */
  letter-spacing: -0.02em; /* display tracking */
  color: var(--brand-hover); /* smebank-700, 6.3:1 on the tint */
}

/* What the stat counts */
.product-panel-stat span {
  font-size: 0.9375rem; /* small */
  color: var(--ink-soft); /* secondary, 6.8:1 on smebank-50 */
}

/* --------------------------------------------------------------------------
   4. Stats strip (ruled band between hero and features)
   -------------------------------------------------------------------------- */

/* A white band bounded by rules above and below, like a totals line */
.stats-band {
  padding-block: 40px; /* shorter than a full section: it is a strip, not a chapter */
  border-block: 1px solid var(--rule); /* totals-line rules top and bottom */
}

/* Four equal columns on desktop instead of pages.css's free-flowing row */
.stats-band .stat-row {
  display: grid; /* equal cells so values line up */
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* two by two on phones */
  gap: 28px 24px; /* row gap, column gap */
}

/* All four in one row once they fit */
@media (min-width: 760px) {
  /* Column count only */
  .stats-band .stat-row {
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* one row of four */
  }
}

/* Each stat carries a short rule on its left, echoing the page's margin line */
.stats-band .stat {
  padding-left: 16px; /* space between the rule and the number */
  border-left: 2px solid var(--brand); /* brand, not orange: these are facts, not deadlines */
}

/* Word values like "Real-time" or "Auditable" need a smaller size than digits to fit a quarter column */
.stats-band .stat-value {
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem); /* shrinks on phones so "Real-time" never overflows */
  overflow-wrap: anywhere; /* last resort for very narrow cells */
}

/* --------------------------------------------------------------------------
   5. Benefits summary panel (aczen.in's dark card beside the benefit list)
   -------------------------------------------------------------------------- */

/* Deep brand panel, the same colour as the closer so it reads as a summary */
.product-summary {
  padding: 28px; /* inner margin */
  background: var(--brand-deep); /* smebank-950, 15.4:1 with white */
  color: var(--paper); /* white text */
  border-radius: var(--radius-lg); /* panel tier */
}

/* Wider padding once there is room */
@media (min-width: 760px) {
  /* Padding only */
  .product-summary {
    padding: 40px; /* more air on desktop */
  }
}

/* The restated headline */
.product-summary-title {
  font-size: 1.5rem; /* sub-display size */
  font-weight: 650; /* semibold: a statement, not a second h1 */
  line-height: 1.25; /* comfortable over two lines */
  letter-spacing: -0.015em; /* tightens at this size */
}

/* The restated subtitle */
.product-summary p + p {
  margin-top: 12px; /* gap under the title */
  color: #D6E4FF; /* smebank-100: 13:1 on smebank-950, softer than pure white */
}

/* Two stat tiles at the bottom of the panel */
.product-summary-stats {
  display: grid; /* equal tiles */
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* two side by side */
  gap: 12px; /* space between tiles */
  margin: 28px 0 0; /* separates tiles from the text; dl default margin removed */
}

/* One tile */
.product-summary-stats div {
  padding: 14px 16px; /* inner margin */
  border: 1px solid rgba(255, 255, 255, 0.22); /* faint outline instead of a translucent blur fill */
  border-radius: var(--radius-md); /* middle tier */
}

/* Tile value */
.product-summary-stats dt {
  font-size: 1.5rem; /* reads as a number */
  font-weight: 800; /* heavy */
  line-height: 1.1; /* compact */
  overflow-wrap: anywhere; /* "Minutes" or "Real-time" never overflow a half-width tile */
}

/* Tile label */
.product-summary-stats dd {
  margin: 4px 0 0; /* removes the dd indent */
  font-size: 0.875rem; /* small */
  color: #D6E4FF; /* smebank-100, 13:1 */
}

/* --------------------------------------------------------------------------
   6. Comparison tables (built on pages.css .plan-table)
   -------------------------------------------------------------------------- */

/* The Aczen column gets the pale brand band so the eye can run down it */
.compare-table td.col-aczen,
.compare-table th.col-aczen {
  background: var(--paper-deep); /* smebank-50; the tick keeps 4.9:1 on it */
}

/* Aczen's header cell also takes the brand colour */
.compare-table thead th.col-aczen {
  color: var(--brand-hover); /* smebank-700, 6.3:1 on smebank-50 */
}

/* Row labels are th scope="row", so they need the feature-name weight, not header bold */
.compare-table tbody th {
  font-weight: 500; /* matches pages.css's first-column weight */
}

/* Row labels need a little more width than plan names */
.compare-table tbody th,
.compare-table thead th:first-child {
  min-width: 200px; /* two lines at most for "B2B payments + TDS in one platform" */
}

/* --------------------------------------------------------------------------
   7. "Why" grid: four reasons, ruled like ledger entries
   -------------------------------------------------------------------------- */

/* Two-by-two grid of reasons; plain divs because a heading can't sit inside a dt */
.why-grid {
  display: grid; /* stacked on phones */
  gap: 0 48px; /* column gap only; rules give the vertical separation */
}

/* Two columns once each reason can be a readable width */
@media (min-width: 760px) {
  /* Column count only */
  .why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 x 2 */
  }
}

/* One reason: rule on top, like a ledger line */
.why-grid > div {
  padding-block: 24px; /* space inside each entry */
  border-top: 1px solid var(--rule); /* the ledger rule */
}

/* Reason heading (h3, so the outline stays h2 > h3) */
.why-grid h3 {
  font-size: 1.25rem; /* sub-heading */
  font-weight: 700; /* bold */
  line-height: 1.25; /* compact */
  letter-spacing: -0.015em; /* Inter tightens at heading sizes */
}

/* Reason text */
.why-grid p {
  margin-top: 8px; /* small gap under the heading */
  max-width: 58ch; /* readable in a half column */
  color: var(--ink-soft); /* secondary */
}

/* Section head beside the grid on wide screens (used on the GST page for rhythm) */
.why-split {
  display: grid; /* stacked by default */
  gap: 32px; /* space between head and grid */
}

/* Head left, grid right on desktop */
@media (min-width: 1000px) {
  /* Head column narrower: the reasons carry the weight */
  .why-split {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); /* head | reasons */
    gap: 56px; /* wide gap */
    align-items: start; /* both columns start level */
  }

  /* The head needs no bottom margin when it sits beside the grid */
  .why-split .page-section-head {
    margin-bottom: 0; /* pages.css's 40px would only add dead space here */
  }

  /* One column of reasons inside the narrower right column */
  .why-split .why-grid {
    grid-template-columns: minmax(0, 1fr); /* a single ruled column reads better beside the head */
  }
}

/* --------------------------------------------------------------------------
   8. Audience cards ("Built for every kind of Indian business")
   -------------------------------------------------------------------------- */

/* Card heading */
.card h3 {
  font-size: 1.15rem; /* sub-heading */
  font-weight: 700; /* bold */
  line-height: 1.25; /* compact */
}

/* Card description */
.card p {
  color: var(--ink-soft); /* secondary */
  font-size: 1rem; /* a notch below body; cards are narrow */
}

/* "Learn more" line pinned to the bottom of each card */
.card-more {
  margin-top: auto; /* pushes to the bottom so all four cards align */
  padding-top: 6px; /* small gap above */
  font-size: 0.9375rem; /* small */
  font-weight: 600; /* reads as the action */
  color: var(--brand); /* link blue, 5.4:1 on white */
}

/* Ruled audience list (business banking page): name left, description right */
.aud-list {
  margin: 0; /* dl default */
}

/* One audience row */
.aud-list > div {
  display: grid; /* stacked on phones */
  gap: 4px 32px; /* tight stack, wide column gap later */
  padding-block: 20px; /* space inside each row */
  border-top: 1px solid var(--rule); /* ledger rule */
}

/* Close the list with a final rule */
.aud-list > div:last-child {
  border-bottom: 1px solid var(--rule); /* the list ends on a line */
}

/* Name | description | link on wider screens */
@media (min-width: 760px) {
  /* Three columns */
  .aud-list > div {
    grid-template-columns: 14rem minmax(0, 1fr) auto; /* name, text, link */
    align-items: baseline; /* all three sit on one text line */
  }
}

/* Audience name */
.aud-list dt {
  font-weight: 700; /* leads the row */
}

/* Audience description and link */
.aud-list dd {
  margin: 0; /* removes the dd indent */
  color: var(--ink-soft); /* secondary */
}

/* The link cell */
.aud-list dd:last-child a {
  font-weight: 600; /* reads as an action */
  white-space: nowrap; /* "Learn more" never breaks */
}

/* --------------------------------------------------------------------------
   9. B2B payments: feature badges, steps, offers
   -------------------------------------------------------------------------- */

/* The badge above each B2B feature heading ("Real-time", "AI-Powered") */
.feature .tag {
  margin-bottom: 10px; /* separates the badge from the heading */
}

/* The four onboarding steps: a real sequence, so numbered */
.flow-steps {
  display: grid; /* stacked on phones */
  gap: 0 32px; /* column gap only */
  margin: 0; /* ol default margin */
  padding: 0; /* ol default indent */
  list-style: none; /* the visible number replaces the list marker */
  counter-reset: flow; /* CSS counter keeps numbering correct if a step is ever added */
}

/* Two columns on tablets, four on desktop */
@media (min-width: 760px) {
  /* Tablet */
  .flow-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 x 2 */
  }
}

/* Desktop: one row, read left to right */
@media (min-width: 1100px) {
  /* Column count only */
  .flow-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* all four in order */
  }
}

/* One step: a heavy rule on top that runs into the next, like a progress line */
.flow-steps li {
  counter-increment: flow; /* advances the step number */
  padding-block: 20px 28px; /* space inside */
  border-top: 3px solid var(--brand); /* the continuous line reads as one process */
}

/* The step number */
.flow-steps li::before {
  content: counter(flow, decimal-leading-zero); /* "01"… matches aczen.in's step labels */
  display: block; /* own line above the heading */
  margin-bottom: 10px; /* gap under the number */
  font-size: 2rem; /* large but below section titles */
  font-variation-settings: "opsz" 32; /* display cut */
  font-weight: 800; /* heavy */
  line-height: 1; /* no extra height */
  letter-spacing: -0.03em; /* display tracking */
  color: var(--brand); /* brand blue, 5.4:1 */
  font-variant-numeric: tabular-nums; /* digits share widths */
}

/* Step heading */
.flow-steps h3 {
  font-size: 1.2rem; /* sub-heading */
  font-weight: 700; /* bold */
  line-height: 1.25; /* compact */
}

/* Step time ("< 10 mins", "Instant") sits under the heading */
.flow-steps .tag {
  margin-top: 8px; /* gap under the heading */
}

/* Step description */
.flow-steps p {
  margin-top: 10px; /* gap under the tag */
  color: var(--ink-soft); /* secondary */
}

/* The mid-page B2B call to action: tinted band, copy and actions side by side on desktop */
.mid-cta {
  display: grid; /* stacked on phones */
  gap: 28px; /* space between copy and actions */
}

/* Side by side on desktop */
@media (min-width: 960px) {
  /* Copy wider than the actions */
  .mid-cta {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); /* copy | actions */
    align-items: center; /* actions centre against the copy */
    gap: 56px; /* wide gap */
  }
}

/* Actions column: buttons, then the three promises */
.mid-cta-actions .hero-promises {
  margin-top: 16px; /* gap under the button */
}

/* Offer terms under the flight cards */
.offer-terms {
  margin-top: 32px; /* gap below the feature grid */
}

/* --------------------------------------------------------------------------
   10. Closer with a lede and two actions
   -------------------------------------------------------------------------- */

/* Heading plus lede block on the dark band */
.closer-copy {
  max-width: 40rem; /* keeps the lede to two or three lines */
}

/* Lede on the dark band */
.closer-copy p {
  margin-top: 14px; /* gap under the heading */
  color: #D6E4FF; /* smebank-100, 13:1 on smebank-950 */
}

/* Two buttons side by side, wrapping on phones */
.closer-actions {
  display: flex; /* side by side */
  flex-wrap: wrap; /* wraps on narrow phones */
  gap: 12px; /* space between */
}

/* Outline button variant for the dark band */
.btn-line-dark {
  background: transparent; /* the band shows through */
  border-color: var(--paper); /* white outline */
  color: var(--paper); /* white label, 15.4:1 */
}

/* Hover fills lightly */
.btn-line-dark:hover {
  background: rgba(255, 255, 255, 0.1); /* faint fill as feedback */
  color: var(--paper); /* keeps the global a:hover blue off the label */
}

/* --------------------------------------------------------------------------
   11. FAQ section rhythm on product pages
   -------------------------------------------------------------------------- */

/* The FAQ lede sits between the title and the first ruled question */
.faq .section-lede {
  margin: -16px 0 32px; /* pulls up under the title (which carries 32px) and leaves room before the list */
}

/* --------------------------------------------------------------------------
   12. Fixes found in the screenshot pass
   -------------------------------------------------------------------------- */

/* Badges on a tinted section would vanish into the same smebank-50 fill, so they switch to white */
.page-section-alt .tag {
  background: var(--paper); /* white pill stays visible on the tint; gray-600 text is 7.6:1 on it */
}

/* Four audience cards fill one row on desktop instead of leaving a lone card on a second row */
@media (min-width: 1100px) {
  /* Only grids holding exactly four cards; other card grids keep pages.css's auto-fill */
  .card-grid:has(> .card:nth-child(4):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* one row of four */
  }
}