/* InfinityIT - eLeasing finance/lease calculator (6 Oct 2026, Daniel's job).
   Round 2 (Maninder's review, 7 Oct 2026): the banner moved from right
   after the hero to just above the footer CTA (site-cta, a dark teal
   band - see site-components.css), on both the printer listing and
   every printer detail page. It also stopped looking like a pasted-in
   ad: dropped the bordered orange-gradient card + custom "badge" class
   for the site's real .eyebrow (teal, same as every other page) and a
   flatter card using the same subtle teal tint already established on
   this page by .finance-equipment-note below, rather than inventing a
   second, louder treatment.

   Padding: this section now sits directly between .catalog-section (or
   .product-specs/.product-faq) and .site-cta, both of which already
   carry the site's full --section-space padding on the sides facing
   this one - stacking a third full padding here read as a much bigger
   gap than any other inter-section gap on the site (Maninder's "far
   too big" review). Checked via getBoundingClientRect() against a
   normal inter-section gap elsewhere (e.g. hero-to-catalogue) until
   this section's own padding, added to its neighbours' padding, came
   out close to that same figure - not by eye. */
.finance-banner {
  padding: clamp(1.25rem, 2.5vw, 2rem) 0;
}

/* Detail pages only, same day: banner moved again, from just above the
   footer CTA to between Specifications and FAQs - .product-specs'
   bottom padding and .product-faq's top padding (printers.css) are
   both already a full section gap each, so the banner's own padding
   needed cutting further here specifically, or the specs-to-FAQ gap
   read even bigger than the original hero-to-banner complaint this
   round started from. Listing-page placement (still between the
   catalogue and .site-cta) is untouched. */
.finance-banner[data-placement="printer_detail"] {
  padding: clamp(.75rem, 1.5vw, 1.25rem) 0;
}

/* Listing-page placement only, same day: Maninder measured (not
   eyeballed) the gap above vs below the banner and found it badly
   uneven - ~144px of blank page background above (.catalog-section's
   own 112px bottom padding, clamp(4.5rem,8vw,7rem), plus this banner's
   32px top padding) against only ~32px below (this banner's own
   bottom padding - .site-cta's dark teal fill starts immediately
   after with zero gap, so its own 96px of padding reads as solid
   colour, not blank space, and was never part of the visible gap).
   Zeroed .catalog-section's bottom padding here (it's only ever used
   on this one page, see print.php, and the banner now always follows
   it) and let this rule's own padding be the SAME value on both
   sides, so above and below are provably equal rather than two
   different paddings landing close by coincidence. */
.catalog-section {
  padding-bottom: 0;
}

.finance-banner[data-placement="printer_listing"] {
  padding: clamp(2.5rem, 4vw, 4rem) 0;
}

.finance-banner-card {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding: clamp(1.4rem, 2.6vw, 1.9rem) clamp(1.6rem, 3vw, 2.2rem);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: color-mix(in srgb, var(--teal) 5%, var(--surface));
}

.finance-banner-icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--teal) 14%, transparent);
  color: var(--teal);
}

.finance-banner-icon svg {
  width: 22px;
  height: 22px;
}

.finance-banner-copy {
  flex: 1;
  min-width: 0;
}

.finance-banner-copy .eyebrow {
  margin-bottom: .3rem;
}

.finance-banner-copy h2 {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  margin-bottom: .3rem;
}

.finance-banner-copy p:not(.eyebrow) {
  margin: 0;
  max-width: 60ch;
}

.finance-banner-card > .button {
  flex-shrink: 0;
}

@media (max-width: 800px) {
  .finance-banner-card {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .finance-banner-card > .button {
    width: 100%;
    justify-content: center;
  }
}

/* --- /finance/ page --- */

/* Same radial-gradient treatment as .site-hero/.service-hero/
   .printer-catalog-hero, and the same h1 size + <em> teal accent -
   this page previously had neither (a bare, unstyled h1 and a plain
   background), which is exactly why it read as a one-off page instead
   of a native part of the site (Maninder's review, round 2, 7 Oct
   2026: "copy it from an existing service page; don't invent a new
   style"). */
.finance-hero {
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(4.5rem, 8vw, 7rem);
  background: radial-gradient(circle at 12% 15%, color-mix(in srgb, var(--teal) 18%, transparent), transparent 30%);
}

.finance-hero h1 {
  font-size: clamp(3rem, 7vw, 5.2rem);
}

.finance-hero h1 em {
  font-style: normal;
  color: var(--teal);
}

/* Two columns inside the normal 1180px .wrap, top-aligned (not centered -
   the calculator column is naturally much taller than the text column,
   and vertically centering it would float the card away from the
   heading). Was a single 730px-wide stacked column with the calculator
   below it, leaving ~40% of the page empty on desktop - Maninder's
   review, 7 Oct 2026. Stacks to one column on mobile/tablet, text
   first then the calculator, same breakpoint printer-product.php's own
   .product-grid uses.

   Round 2: widened from an even 1fr/1fr split - eLeasing's own payment
   comparison table inside the iframe needs more real width than half
   of a 1180px container gives it and was scrolling horizontally at
   1920/1440 (Maninder's review). 5fr/7fr keeps the text column
   readable while giving the calculator column meaningfully more room. */
.finance-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 3rem;
  align-items: start;
}

/* Keeps the heading/text/ticks column in view while the much longer
   calculator column scrolls past it, desktop only - disabled below the
   grid's own stacking breakpoint since a sticky column makes no sense
   once the two columns are no longer side by side (Maninder's review,
   round 2). The header's own sticky nav bar height sets the offset so
   this doesn't tuck under it. */
@media (min-width: 1001px) {
  .finance-intro {
    position: sticky;
    top: calc(78px + 1.5rem); /* .top's own fixed height, site.css */
    align-self: start;
  }
}

@media (max-width: 1000px) {
  .finance-grid {
    grid-template-columns: 1fr;
  }
}

.finance-equipment-note {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin-top: 1.2rem;
  padding: .9rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--teal) 5%, var(--surface));
  font-size: .95rem;
  color: var(--muted);
  box-sizing: border-box;
}

.finance-equipment-note svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--teal);
}

.finance-printer-context {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  margin-top: 1.4rem;
  padding: .8rem 1.1rem;
  border-radius: 14px;
  background: color-mix(in srgb, var(--orange) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--orange) 25%, var(--line));
  font-size: .95rem;
  box-sizing: border-box;
}

.finance-printer-context strong {
  color: var(--text);
}

.finance-printer-context a {
  color: var(--teal);
  font-weight: 700;
}

.finance-benefits {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: grid;
  gap: .7rem;
}

.finance-benefits li {
  position: relative;
  padding-left: 1.6rem;
  font-size: .95rem;
  font-weight: 600;
}

.finance-benefits li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--teal);
  font-weight: 900;
}

/* No border/background/padding on our own wrapper - the eLeasing
   calculator already renders its own bordered card inside the iframe,
   so framing it again here double-framed it (Maninder's review, 7 Oct
   2026). min-height stays as the floor for if the resize postMessage
   is ever slow to arrive or doesn't fire at all - the actual height is
   still driven by eleasing.co.nz's own resize message (finance.php's
   inline script) once it does.

   overflow:hidden (same day, Maninder flagged it again): the ~140px
   gap below their card isn't empty padding on their end - it's a
   transparent ~32px gap (their card's own box-shadow fades out inside
   it) followed by an opaque ~110px white footer block that belongs to
   eLeasing's embedding platform, not their calculator. Confirmed by
   loading their page directly and measuring it - identical in every
   calculator state and at both widths we actually render the iframe
   at. finance.php's resize script now gives the IFRAME its full
   natural height but sets THIS wrapper's height 110px shorter, so
   overflow:hidden here clips exactly that trailing block and nothing
   else - the card and its shadow sit well inside the remaining
   height either way. */
.finance-calculator-frame {
  width: 100%;
  min-height: 480px;
  overflow: hidden;
}

.finance-calculator-frame-inner {
  width: 100%;
  border: 0;
  display: block;
}