/* ==========================================================================
   aczen.live solutions pages: extras on top of pages.css
   Only what /solutions/* needs and pages.css does not provide: the hero
   label, the product panels, the offer figures, the benefit callout and
   testimonials. Every class is prefixed sol- so nothing here can collide
   with the shared inner-page contract. Orange stays reserved for "due".
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */

/* Audience heroes have no media column, so cap the copy width instead of letting it run edge to edge */
.sol-hero-copy {
  max-width: 760px; /* same reading width the home FAQ uses */
}

/* The source's badge above the headline, kept as a quiet sentence-case label rather than an all-caps pill */
.sol-tag {
  display: inline-block; /* hugs its text so the tint reads as a label, not a band */
  margin-bottom: 18px; /* clear step above the heavy headline */
  padding: 4px 10px; /* just enough tint around the words */
  background: var(--paper-deep); /* smebank-50, the site's pale brand tint */
  border-radius: var(--radius-sm); /* smallest radius tier, like buttons */
  color: var(--brand-deep); /* smebank-950 text, far above AA on the tint */
  font-size: 0.9375rem; /* smaller than body: it qualifies the headline */
  font-weight: 600; /* firm enough to read as a label at the small size */
}

/* --------------------------------------------------------------------------
   2. Product panels (team pages)
   -------------------------------------------------------------------------- */

/* Flat panel that stands in for the template's floating hero card; a bordered ledger page, not a shadowed card */
.sol-panel {
  padding: 28px; /* inner room so the ruled rows don't touch the frame */
  background: var(--paper); /* white page */
  border: 1px solid var(--rule); /* the border does what the source's shadow did */
  border-radius: var(--radius-lg); /* panel tier of the radius hierarchy */
}

/* Panel header: team name over its caption */
.sol-panel-head {
  padding-bottom: 16px; /* space above the first ruled row */
}

/* Team name in the panel header */
.sol-panel-name {
  font-size: 1.125rem; /* a step above body, like a feature heading */
  font-weight: 700; /* bold carries the name at this size */
  color: var(--ink); /* primary text */
}

/* "Powered by Aczen" caption */
.sol-panel-sub {
  margin-top: 2px; /* tight pairing with the name */
  font-size: 0.875rem; /* caption size */
  color: var(--ink-soft); /* secondary, 7.6:1 on white */
}

/* The three features inside the panel reuse .ticks; only the top gap changes */
.sol-panel-list {
  margin-top: 0; /* the header's padding already separates it */
}

/* Headline figure pinned under the list, like a running total at the foot of a ledger page */
.sol-panel-stat {
  display: flex; /* value and label on one baseline */
  align-items: baseline; /* the big number and small label share a baseline */
  flex-wrap: wrap; /* long values drop the label to a new line on phones */
  gap: 4px 10px; /* row gap when wrapped, column gap otherwise */
  margin-top: 8px; /* small step below the last ruled row */
  padding-top: 16px; /* room under the closing rule */
  border-top: 2px solid var(--ink); /* heavier rule reads as "total", the ledger convention */
}

/* The pinned figure itself */
.sol-panel-stat-value {
  font-size: 2rem; /* large enough to lead the panel */
  font-variation-settings: "opsz" 32; /* Inter's display cut, matching .stat-value */
  font-weight: 800; /* heavy */
  line-height: 1; /* no extra space around the number */
  letter-spacing: -0.02em; /* display-size digits need tightening */
  color: var(--brand); /* brand blue marks it as the key figure; 5.4:1 on white */
}

/* What the pinned figure measures */
.sol-panel-stat-label {
  font-size: 0.9375rem; /* qualifies the number */
  color: var(--ink-soft); /* secondary */
}

/* Dark summary card beside the benefits: the template's deep-brand card, on the closer's colour */
.sol-panel-dark {
  background: var(--brand-deep); /* smebank-950, same as the closing band */
  border-color: var(--brand-deep); /* hides the light rule against the dark fill */
  color: var(--paper); /* white text, 15.4:1 */
}

/* Headline repeated inside the dark card */
.sol-panel-title {
  font-size: 1.5rem; /* the template's text-2xl */
  font-weight: 650; /* semibold, one step under section titles */
  line-height: 1.25; /* snug over two lines */
  letter-spacing: -0.015em; /* matches other sub-headings */
}

/* Subtitle repeated inside the dark card */
.sol-panel-text {
  margin-top: 12px; /* gap under the headline */
  color: rgba(255, 255, 255, 0.82); /* softened white, still ~12:1 on smebank-950 */
}

/* Two stat boxes side by side */
.sol-figure-pair {
  display: grid; /* equal columns */
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* two up at every width, as in the template */
  gap: 12px; /* space between the boxes */
  margin-top: 28px; /* clear step below the text */
}

/* One stat box on the dark card */
.sol-figure-box {
  display: flex; /* stacks value over label */
  flex-direction: column; /* vertical */
  gap: 4px; /* tight pairing */
  padding: 14px 16px; /* inner room */
  background: rgba(255, 255, 255, 0.1); /* faint lift off the dark fill, the template's bg-white/10 */
  border-radius: var(--radius-md); /* middle tier inside the larger panel */
}

/* Stat value on the dark card */
.sol-figure-box-value {
  font-size: 1.5rem; /* the template's text-2xl */
  font-weight: 800; /* heavy */
  line-height: 1.1; /* compact */
  overflow-wrap: anywhere; /* long words like "Same-day" never push the box wider than its column */
}

/* Stat label on the dark card */
.sol-figure-box-label {
  font-size: 0.8125rem; /* the template's text-xs, nudged up for legibility */
  color: rgba(255, 255, 255, 0.78); /* softened white, ~11:1 */
}

/* --------------------------------------------------------------------------
   3. Stats strip
   -------------------------------------------------------------------------- */

/* The stats strip is a thin ruled band, not a full-height section */
.sol-stats {
  padding-block: 40px; /* shorter than --section-y: four numbers don't need 96px of air */
  border-block: 1px solid var(--rule); /* ruled above and below, like the template's border-y */
}

/* Tinted variant keeps its tint and drops the rules, which would double against the band edge */
.page-section-alt.sol-stats {
  border-block: 0; /* the tint already separates it */
}

/* Four figures spread across the column instead of bunching left */
.sol-stat-row {
  display: grid; /* grid gives even columns, which a wrapping flex row can't */
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* two up on phones, as the template does */
  gap: 28px 24px; /* row gap, then column gap */
}

/* Four across once there is room */
@media (min-width: 760px) {
  /* Column count only */
  .sol-stat-row {
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* one row of four */
  }
}

/* Word values like "Quote→Cash" must wrap inside their column rather than overflow on phones */
.sol-stat-row .stat-value {
  overflow-wrap: anywhere; /* breaks only when the word is wider than the column */
  font-variant-numeric: normal; /* tabular figures widen the hyphen in "Real-time"; these stand alone, so column alignment isn't needed */
}

/* --------------------------------------------------------------------------
   4. Offer cards
   -------------------------------------------------------------------------- */

/* Card headings: a sub-heading scale inside the card */
.card h3 {
  font-size: 1.1875rem; /* a step above body */
  font-weight: 700; /* bold carries the heading role */
  line-height: 1.3; /* compact over two lines */
}

/* Commission or funding range: the figure people compare across cards */
.sol-figure {
  font-size: 1.5rem; /* the source's text-2xl */
  font-variation-settings: "opsz" 32; /* display cut for a figure */
  font-weight: 800; /* heavy so it leads the card */
  line-height: 1.15; /* compact */
  letter-spacing: -0.015em; /* tighten display digits */
  color: var(--brand); /* brand blue, 5.4:1 on white */
}

/* Card description */
.sol-card-text {
  color: var(--ink-soft); /* secondary to the heading and figure */
}

/* Compact ticks inside cards: smaller type, tighter rows */
.sol-ticks {
  margin-top: 4px; /* the card's flex gap already spaces it */
}

/* Tighter rows at card scale */
.sol-ticks li {
  padding-block: 7px; /* shorter ledger lines than the full-width lists */
  font-size: 0.9375rem; /* one step under body */
}

/* Keep the tick aligned with the smaller first line */
.sol-ticks li::before {
  top: 7px; /* matches the reduced top padding */
}

/* --------------------------------------------------------------------------
   5. Benefits callout
   -------------------------------------------------------------------------- */

/* The source's photo badge, promoted to the media column: a big figure on the pale tint */
.sol-callout {
  padding: clamp(28px, 5vw, 48px); /* generous on desktop, still roomy on phones */
  background: var(--paper-deep); /* smebank-50 tint */
  border-radius: var(--radius-lg); /* panel tier */
}

/* On tinted sections the callout switches to white so it doesn't disappear */
.page-section-alt .sol-callout {
  background: var(--paper); /* white on the tint */
  border: 1px solid var(--rule); /* keeps an edge on white */
}

/* The badge headline, set as the page's display figure */
.sol-callout-value {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); /* scales with the viewport like section titles */
  font-variation-settings: "opsz" 32; /* display cut */
  font-weight: 800; /* heavy */
  line-height: 1.05; /* tight */
  letter-spacing: -0.03em; /* display tracking */
  color: var(--ink); /* primary text */
}

/* The badge subline */
.sol-callout-sub {
  margin-top: 12px; /* gap under the figure */
  padding-top: 12px; /* room under the rule */
  border-top: 1px solid var(--rule); /* ruled like a ledger total */
  color: var(--ink-soft); /* secondary */
}

/* --------------------------------------------------------------------------
   6. Testimonials
   -------------------------------------------------------------------------- */

/* Quotes sit two up at most, as in the source, and stay readable */
.sol-quote-grid {
  max-width: 960px; /* the source's max-w-4xl */
}

/* A testimonial card: figure resets plus a slightly roomier layout */
.sol-quote {
  margin: 0; /* figure has default margins */
  gap: 16px; /* more air than the default card gap between stars, quote and name */
}

/* Rating stars in brand blue; orange is reserved for deadlines */
.sol-stars {
  color: var(--brand); /* brand blue, non-text decoration */
  letter-spacing: 0.1em; /* separates the stars slightly */
  line-height: 1; /* no extra height above the quote */
}

/* The quote itself */
.sol-quote blockquote {
  margin: 0; /* blockquote default indent would narrow the text */
  color: var(--ink); /* primary: it is the point of the card */
}

/* Quote attribution: name over firm or role */
.sol-quote figcaption {
  display: flex; /* stacks name and role */
  flex-direction: column; /* vertical */
  gap: 2px; /* tight pairing */
  margin-top: auto; /* pins the attribution to the card foot so two cards align */
  padding-top: 14px; /* room under the rule */
  border-top: 1px solid var(--rule); /* separates the words from who said them */
}

/* Person's name */
.sol-quote-name {
  font-weight: 700; /* reads as the name */
}

/* Firm, company or profession */
.sol-quote-role {
  font-size: 0.9375rem; /* smaller than the name */
  color: var(--ink-soft); /* secondary */
}

/* --------------------------------------------------------------------------
   7. Closer
   -------------------------------------------------------------------------- */

/* Heading and lede grouped as one flex item beside the button */
.sol-closer-copy {
  max-width: 44rem; /* keeps the lede from stretching across the whole band */
}

/* The source's CTA paragraph on the dark band */
.sol-closer-lede {
  margin-top: 16px; /* gap under the heading */
  max-width: 56ch; /* readable line length */
  color: rgba(255, 255, 255, 0.85); /* softened white, ~12.5:1 on smebank-950 */
}