/* ==========================================================================
   PINVOICE — LANDING SECTION COMPONENTS
   Dimensions follow the design spec exactly. Image areas are intentionally
   empty framed placeholders — real screenshots drop in later.
   ========================================================================== */

/* ---- Empty image placeholder frame ------------------------------------- */
.pv-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--pv-screen);
  color: var(--pv-text-3);
  font-size: 13px;
  text-align: center;
}

.pv-slot > * {
  width: 100%;
}

/* Screenshot in the feature slot (editor Image block or JS-injected). */
.pv-slot .wp-block-image,
.pv-slot figure {
  margin: 0 !important;
  width: 100%;
  height: 100%;
}

.pv-slot-shot,
.pv-slot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.pv-slot-shot[hidden],
.pv-slot img[hidden] {
  display: none;
}

.pv-slot.has-shot {
  padding: 0;
}

.pv-slot.has-shot > p,
.pv-slot:has(img:not([hidden])) > p {
  display: none !important;
}

.pv-slot p {
  margin: 0 !important;
  color: var(--pv-text-3) !important;
  font-size: 13px !important;
}

/* Per-tab source images live inside the left list; hide them — sections.js
   reads their src and shows them in .pv-feat-slot. */
.pv-feat-item img {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---- Hero product mockup ------------------------------------------------ */
.pv-browser {
  max-width: 1080px;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-r-card) var(--pv-r-card) 0 0;
  background: var(--pv-card);
  box-shadow: 0 24px 60px -24px rgba(43, 26, 74, 0.8), 0 10px 30px -15px rgba(138, 92, 212, 0.15);
}

/* title bar: 36px tall, three 10px dots (6px apart) then the url 12px along */
.pv-browser-bar {
  display: flex !important;
  align-items: center;
  gap: 12px;
  height: 36px;
  padding: 0 14px !important;
  margin: 0 !important;
  background: var(--pv-card-2);
  border-bottom: 1px solid var(--pv-border);
  color: var(--pv-text-3) !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

.pv-browser-bar::before {
  content: "";
  flex: 0 0 auto;
  width: 42px;   /* 3 × 10px dots + 2 × 6px gaps */
  height: 10px;
  background:
    radial-gradient(circle 5px at 5px 5px, var(--pv-dot) 98%, transparent) 0 0/16px 10px no-repeat,
    radial-gradient(circle 5px at 5px 5px, var(--pv-dot) 98%, transparent) 16px 0/16px 10px no-repeat,
    radial-gradient(circle 5px at 5px 5px, var(--pv-dot) 98%, transparent) 32px 0/16px 10px no-repeat;
}

.pv-browser .pv-slot {
  height: 520px;
}

@media (max-width: 767px) {
  .pv-browser .pv-slot {
    height: 240px;
  }
}

/* ---- Feature explorer ---------------------------------------------------
   Two columns: a vertical tab list left, a screenshot frame right. The active
   tab is marked by a 3px accent bar; every description stays visible.
   ------------------------------------------------------------------------ */
.pv-feat-grid > .kt-row-column-wrap {
  grid-template-columns: minmax(320px, 420px) 1fr !important;
  align-items: center;
}

@media (max-width: 1024px) {
  .pv-feat-grid > .kt-row-column-wrap {
    grid-template-columns: 1fr !important;
  }
}

/* left column: the tab list */
.pv-feat-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Core's flow layout gives every child a block-gap margin on top of the flex
   `gap` above. The gap is the only spacing this list wants, so drop the rest.
   Two classes deep so this outranks core's `:root :where(...) > *` rule
   without needing !important. */
.pv-feat-list > .pv-feat-item {
  margin-block: 0;
}

/* The accent bar is a full-height grid cell, so it cannot round with the card.
   Column 1 is the bar (drawn by ::before), column 2 the heading + description. */
.pv-feat-item {
  /* display: grid;
  grid-template-columns: 3px 1fr; */
  position: relative;
  column-gap: 14px;
  padding: 12px 16px;
  border-radius: var(--pv-r-card);
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
}

.pv-feat-item:hover, .pv-feat-item.is-active {
  background: rgba(255, 255, 255, 0.08);
}

.pv-feat-item:focus-visible {
  outline: 2px solid var(--pv-accent);
  outline-offset: 2px;
}

.pv-feat-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  grid-column: 1;
  grid-row: 1 / -1;
  border-radius: 2px;
  background: transparent;
  transition: background-color 150ms ease;
}

.pv-feat-item.is-active::before {
  background: var(--pv-accent);
}

.pv-feat-item h3,
.pv-feat-item p {
  grid-column: 2;
}

.pv-feat-item h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
}

.pv-feat-item p {
  margin: 3px 0 0 !important;
  color: var(--pv-text-2);
  font-size: 14px;
  line-height: 1.5;
}

/* right column: the screenshot frame */
.pv-feat-slot {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-r-card);
  background: var(--pv-screen);
  box-shadow: 0 24px 48px -28px rgba(43, 26, 74, 0.6);
}

.pv-feat-slot .pv-slot {
  aspect-ratio: 16 / 11;
  height: auto;
  border: 0;
}

.pv-feat-pill {
  display: none !important;
}

/* ---- Breadcrumb ---------------------------------------------------------
   Sits above a sub-page H1. Current item takes the accent colour.
   ------------------------------------------------------------------------ */
.pv-crumb {
  margin: 0 0 16px !important;
  color: var(--pv-text-3) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

.pv-crumb a {
  color: var(--pv-text-3);
  text-decoration: none;
}

.pv-crumb a:hover {
  color: var(--pv-secondary);
}

.pv-crumb .pv-crumb-sep {
  margin: 0 6px;
}

.pv-crumb .pv-crumb-here {
  color: var(--pv-secondary);
}

/* ---- Split hero (sub-pages) ---------------------------------------------
   Left column carries the copy, right column the product frame.
   ------------------------------------------------------------------------ */
.pv-hero-split .pv-lede {
  max-width: 520px;
  margin-inline: 0 !important;
}

.pv-hero-split h1.wp-block-kadence-advancedheading {
  margin-inline: 0;
  max-width: none;
}

/* ---- Numbered step label ------------------------------------------------ */
.pv-step-label {
  margin: 0 0 6px !important;
  color: var(--pv-accent-text) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px;
  line-height: 1 !important;
  text-transform: uppercase;
}

/* ---- Alternating feature rows -------------------------------------------
   Text one side, screenshot the other; the modifier flips the visual order
   so consecutive rows alternate without duplicating markup.
   ------------------------------------------------------------------------ */
.pv-featrow > .kt-row-column-wrap {
  align-items: center;
}

.pv-featrow-flip > .kt-row-column-wrap > .wp-block-kadence-column:first-child {
  order: 2;
}

.pv-featrow h3 {
  margin: 0 0 20px !important;
  font-size: 26px !important;
  font-family: var(--pv-font-head) !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
  line-height: 1.25 !important;
}

/* a bullet: tick, bold lead-in, then the supporting line */
.pv-bullet {
  position: relative;
  margin: 0 0 18px !important;
  padding-left: 26px;
  color: var(--pv-text-3) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

.pv-bullet:last-child {
  margin-bottom: 0 !important;
}

.pv-bullet::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  width: 16px;
  height: 16px;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b49fdb' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

.pv-bullet strong {
  display: block;
  margin-bottom: 3px;
  color: var(--pv-text);
  font-size: 15px;
  font-weight: 600;
}

/* ---- Formula block ------------------------------------------------------
   Used on the calculator pages to state the arithmetic plainly. Monospace so
   the expression reads as a formula rather than prose.
   ------------------------------------------------------------------------ */
.pv-formula {
  display: block;
  margin: 0 0 14px !important;
  padding: 16px 18px;
  background: var(--pv-page);
  border: 1px solid var(--pv-border-2);
  border-left: 3px solid var(--pv-accent);
  border-radius: var(--pv-r-menu);
  color: var(--pv-text) !important;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 14px !important;
  line-height: 1.6 !important;
  overflow-x: auto;
}

.pv-formula em {
  color: var(--pv-accent-text);
  font-style: normal;
}

/* worked example sits under a formula, quieter */
.pv-eg {
  margin: 0 !important;
  color: var(--pv-text-3) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

/* ---- Reference tables ---------------------------------------------------
   core/table on a dark section. Scrolls rather than squashing on mobile.
   ------------------------------------------------------------------------ */
.pv-dark .wp-block-table {
  margin: 0;
  overflow-x: auto;
}

.pv-dark .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  background: var(--pv-card-2);
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-r-card);
  overflow: hidden;
}

.pv-dark .wp-block-table th,
.pv-dark .wp-block-table td {
  padding: 13px 16px;
  border: 0;
  border-bottom: 1px solid var(--pv-border);
  text-align: left;
  font-size: 14px;
  line-height: 1.5;
}

.pv-dark .wp-block-table th {
  background: rgba(255, 255, 255, 0.04);
  color: var(--pv-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.pv-dark .wp-block-table td {
  color: var(--pv-text-3);
}

.pv-dark .wp-block-table td:first-child {
  color: var(--pv-text);
  font-weight: 600;
  white-space: nowrap;
}

.pv-dark .wp-block-table tr:last-child td {
  border-bottom: 0;
}

/* ---- Mobile band -------------------------------------------------------- */
.pv-mobile-band {
  background: linear-gradient(180deg, #0c0e1c, var(--pv-page));
  overflow: hidden;
}

.pv-mob-copy .pv-lede {
  max-width: 460px;
  margin-inline: 0 !important;
  line-height: 1.65 !important;
}

/* ---- App store badges --------------------------------------------------- */
.pv-store-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.pv-store {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border-radius: var(--pv-r-menu);
  background: #fff;
  color: var(--pv-page);
  font-weight: 600;
  text-decoration: none;
  transition: opacity 150ms ease;
}

.pv-store:hover {
  opacity: 0.88;
  color: var(--pv-page);
}

.pv-store-ico svg {
  display: block;
  width: 20px;
  height: 20px;
}

.pv-store-txt {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.pv-store-top {
  font-size: 10px;
  font-weight: 500;
  color: #6b7178;
}

.pv-store-main {
  font-size: 15px;
  font-weight: 600;
}

/* ---- Phone frames ------------------------------------------------------- */
.pv-phones {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 18px;
  width: 100%;
}

/* same as the tab list: the flex `gap` above is the spacing, so core's
   flow-layout block-gap margin must not stack a second one on top */
.pv-phones > .pv-phone {
  margin-block: 0;
}

.pv-phone {
  flex: 0 0 auto;
  width: 270px;
  height: 580px;
  overflow: hidden;
  background: var(--pv-screen);
  border: 6px solid var(--pv-brand-deep);
  border-radius: var(--pv-r-phone);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7);
}

/* the first phone staggers down, as in the reference */
.pv-phone:first-child {
  transform: translateY(16px);
}

.pv-phone .pv-slot {
  height: 100%;
}

.pv-phone .pv-slot {
  padding: 0;
  border-radius: 0;
}

@media (max-width: 575px) {
  .pv-phone {
    width: 150px;
    height: 310px;
  }
}

/* ---- Cards -------------------------------------------------------------- */
/* Kadence names the per-block class `kadence-column` + uniqueID (e.g.
   kadence-column10_fc1), so a bare `.kadence-column` selector matches nothing.
   Always target `.wp-block-kadence-column`.

   Card heading scale — every h3 on a dark section resolves to one of these:
     17px  default card (feature grid, overview)
     19px  step card        (.pv-step)
     16px  tool card        (.pv-tool) and tab item (.pv-feat-item)
     14px  industry chip    (.pv-chip)                                       */
.pv-dark .wp-block-kadence-column h3 {
  margin: 0 0 8px;
  color: var(--pv-text);
  font-family: var(--pv-font-body);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
}

.pv-dark .wp-block-kadence-column p {
  color: var(--pv-text-2);
  font-size: 14px;
  line-height: 1.6;
}

/* ---- How it works: numbered step cards ---------------------------------- */
.pv-step h3 {
  margin-top: 20px !important;
  font-size: 19px !important;
}

.pv-step p {
  margin-top: 8px !important;
  font-size: 15px !important;
  line-height: 1.6;
}

.pv-step-num {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 !important;
  border-radius: var(--pv-r-tile);
  background: var(--pv-brand-tint);
  border: 1px solid var(--pv-brand-border);
  color: var(--pv-accent-text) !important;
  font-family: var(--pv-font-head) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

/* ---- Icon tiles on cards ------------------------------------------------
   Rendered via ::before so blocks stay clean — a card needs only
   `pv-ico-card pv-ico-<slug>`. Slug rules live in the generated icons.css.
   ------------------------------------------------------------------------ */
.pv-ico-card > .kt-inside-inner-col::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: var(--pv-r-tile);
  background-color: var(--pv-brand-tint);
  border: 1px solid var(--pv-brand-border);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
}

/* icon cards: title 18px under the tile, body 8px under the title */
.pv-ico-card h3 {
  margin-top: 18px !important;
}

.pv-ico-card p {
  margin-top: 8px !important;
}

/* ---- Testimonial cards --------------------------------------------------
   Flex column so every author row sits on the same baseline regardless of
   quote length.
   ------------------------------------------------------------------------ */
.pv-tsc > .kt-inside-inner-col {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.pv-stars {
  display: flex;
  gap: 2px;
  margin: 0 !important;
  color: var(--pv-star) !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

.pv-quote {
  flex: 1;
  margin-top: 16px !important;
  color: var(--pv-text-2) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
}

.pv-attrib {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px !important;
  font-size: 13px !important;
  line-height: 1.4;
  color: var(--pv-text-3) !important;
}

.pv-attrib .pv-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: var(--pv-r-pill);
  background: var(--pv-brand-tint);
  border: 1px solid var(--pv-brand-border);
  color: var(--pv-accent-text);
  font-size: 15px;
  font-weight: 700;
}

.pv-attrib strong {
  display: block;
  color: var(--pv-text);
  font-size: 14px;
  font-weight: 600;
}

/* ---- Card grids ---------------------------------------------------------
   Kadence sets flex-direction on .kt-inside-inner-col but never display:flex,
   so it behaves as a block and alignment properties are ignored. Cards that
   need to align their contents opt in below. height:100% makes every cell in
   a row match the tallest, so short cells (e.g. the "View all" tile) stretch.
   ------------------------------------------------------------------------ */
.pv-dark .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col {
  height: 100%;
}

/* Whole-card link: the title's anchor is stretched over the tile, so the
   entire card is one hit target. Any card that links adds .pv-linkcard
   (.pv-chip and .pv-tool are link cards by definition). */
.pv-chip,
.pv-tool,
.pv-tool-all,
.pv-linkcard {
  position: relative;
}

.pv-chip h3 a,
.pv-tool h3 a,
.pv-linkcard h3 a {
  color: inherit;
  text-decoration: none;
}

.pv-chip h3 a::after,
.pv-tool h3 a::after,
.pv-linkcard h3 a::after,
.pv-tool-all a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--pv-r-card);
}

.pv-chip:hover h3 a,
.pv-tool:hover h3 a,
.pv-linkcard:hover h3 a {
  color: var(--pv-secondary);
}

.pv-chip:focus-within > .kt-inside-inner-col,
.pv-tool:focus-within > .kt-inside-inner-col,
.pv-linkcard:focus-within > .kt-inside-inner-col,
.pv-tool-all:focus-within > .kt-inside-inner-col {
  outline: 2px solid var(--pv-accent);
  outline-offset: 2px;
}

/* ---- Industry tiles ----------------------------------------------------- */
.pv-chip > .kt-inside-inner-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0;
}

.pv-chip.pv-ico-card > .kt-inside-inner-col::before {
  width: 40px;
  height: 40px;
  margin-bottom: 12px;
  background-size: 20px 20px;
}

.pv-chip h3 {
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

.pv-chip > .kt-inside-inner-col,
.pv-tool > .kt-inside-inner-col,
.pv-linkcard > .kt-inside-inner-col {
  transition: border-color 150ms ease;
}

.pv-chip:hover > .kt-inside-inner-col,
.pv-tool:hover > .kt-inside-inner-col,
.pv-linkcard:hover > .kt-inside-inner-col {
  border-color: var(--pv-accent) !important;
}

/* ---- Free tools --------------------------------------------------------- */
.pv-tool h3 {
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

.pv-tool p {
  margin-top: 0px !important;
  color: var(--pv-text-3) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

/* eighth cell: dashed call-to-action */
.pv-tool-all > .kt-inside-inner-col {
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px dashed var(--pv-brand-border) !important;
  background: var(--pv-accent-tint) !important;
  transition: background-color 150ms ease;
}

.pv-tool-all:hover > .kt-inside-inner-col {
  background: rgba(138, 92, 212, 0.22) !important;
}

.pv-tool-all p {
  margin: 0 !important;
}

.pv-tool-all a {
  color: var(--pv-accent-text);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.pv-tool-all:hover a {
  color: var(--pv-secondary);
}

/* ---- FAQ accordion ------------------------------------------------------
   Native <details>, so it works without JS. The default marker is removed and
   replaced with a + that rotates 45° into an × when the card is open.
   ------------------------------------------------------------------------ */
.pv-faq .wp-block-details {
  margin: 0;
  overflow: hidden;
  background: var(--pv-card-2);
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-r-card);
}

.pv-faq .wp-block-details + .wp-block-details {
  margin-top: 12px;
}

.pv-faq .wp-block-details:first-of-type {
  margin-top: 40px;
}

.pv-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  color: var(--pv-text);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}

.pv-faq summary::-webkit-details-marker,
.pv-faq summary::marker {
  display: none;
  content: "";
}

.pv-faq summary::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--pv-accent-text);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  transition: transform 150ms ease;
}

.pv-faq details[open] summary::after {
  transform: rotate(45deg);
}

.pv-faq summary:focus-visible {
  outline: 2px solid var(--pv-accent);
  outline-offset: -2px;
}

.pv-faq .wp-block-details > :not(summary) {
  margin: 0;
  padding: 0 24px 22px;
  color: var(--pv-text-2);
  font-size: 15px;
  line-height: 1.65;
}

/* ---- Final CTA band ----------------------------------------------------- */
.pv-cta-card > .kt-inside-inner-col {
  position: relative;
  overflow: hidden;
}

.pv-cta-card h2 {
  margin: 0 !important;
  color: #fff !important;
}

.pv-cta-card .pv-lede {
  max-width: 520px;
  margin: 16px auto 0 !important;
  color: var(--pv-cta-sub) !important;
  font-size: 18px !important;
  line-height: 1.6 !important;
}

/* button flips to white — filled indigo would vanish on the band */
.pv-cta-card .kb-buttons-wrap {
  justify-content: center;
  margin-top: 32px !important;
}

.pv-dark .pv-cta-card .wp-block-kadence-advancedbtn .kb-button {
  height: auto;
  padding: 14px 32px;
  background: var(--pv-secondary) !important;
  color: var(--pv-secondary-text) !important;
  border-radius: var(--pv-r-menu);
  font-size: 16px;
  font-weight: 700;
  transition: opacity 150ms ease, background-color 150ms ease;
}

.pv-dark .pv-cta-card .wp-block-kadence-advancedbtn .kb-button:hover {
  background: var(--pv-secondary-hover) !important;
  color: var(--pv-secondary-text) !important;
  opacity: 0.95;
}

/* reassurance row */
.pv-reassure {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin: 22px 0 0 !important;
  color: var(--pv-cta-sub) !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}

/* watermark mark, bottom-right */
.pv-cta-card > .kt-inside-inner-col::after {
  content: "";
  position: absolute;
  right: -30px;
  bottom: -40px;
  width: 280px;
  height: 280px;
  opacity: 0.14;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cpath d='M34 27 H52 L64 39 V63 A8 8 0 0 1 56 71 H34 A8 8 0 0 1 26 63 V35 A8 8 0 0 1 34 27 Z' fill='%23ffffff'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* ---- Footer -------------------------------------------------------------
   Brand column is widest (1.4fr); the four link columns share the rest.
   ------------------------------------------------------------------------ */
.site-footer {
  background: var(--pv-footer) !important;
  border-top: 1px solid var(--pv-border);
}

.site-footer .site-container {
  max-width: var(--pv-container);
}

.site-top-footer-inner-wrap {
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr !important;
  gap: 32px !important;
  padding-top: 64px;
  padding-bottom: 0;
}

@media (max-width: 1024px) {
  .site-top-footer-inner-wrap {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 575px) {
  .site-top-footer-inner-wrap {
    grid-template-columns: 1fr !important;
  }
}

/* brand block */
.pv-foot-brand img {
  height: 28px;
  width: auto;
  max-width: 100%;
}

.pv-foot-brand p {
  max-width: 240px;
  margin-top: 16px;
  color: var(--pv-text-2);
  font-size: 14px;
  line-height: 1.6;
}

.pv-social {
  display: flex;
  gap: 12px;
  margin-top: 20px !important;
}

.pv-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--pv-r-menu);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  text-decoration: none;
  transition: background-color 150ms ease;
}

.pv-social a:hover {
  background: var(--pv-accent-tint);
}

/* link columns */
.site-footer .widget-title {
  margin: 0 0 14px;
  color: var(--pv-text) !important;
  font-family: var(--pv-font-body);
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.site-footer .widget_nav_menu ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.site-footer .widget_nav_menu li {
  margin: 0;
}

.site-footer a {
  color: var(--pv-text-2);
  font-size: 14px;
  text-decoration: none;
  transition: opacity 150ms ease;
}

.site-footer a:hover {
  color: var(--pv-secondary) !important;
  opacity: 1;
}

/* bottom bar */
.site-footer .site-bottom-footer-inner-wrap {
  margin-top: 48px;
  padding-top: 24px;
  padding-bottom: 40px;
  border-top: 1px solid var(--pv-border);
  color: var(--pv-text-3);
  font-size: 13px;
}

/* Kadence wraps the footer HTML in a <p>, so the flex row goes there */
.site-footer .site-bottom-footer-inner-wrap .footer-html-inner,
.site-footer .site-bottom-footer-inner-wrap .footer-html-inner p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 0;
}

.site-footer .site-bottom-footer-inner-wrap a {
  color: var(--pv-text-3);
  font-size: 13px;
}

.pv-legal {
  display: flex;
  gap: 20px;
}

@media (prefers-reduced-motion: reduce) {
  .pv-feat-item,
  .pv-chip > .kt-inside-inner-col,
  .pv-tool > .kt-inside-inner-col,
  .pv-social a {
    transition: none;
  }
}

select[name="company_size"], select[name="product_interest"] {
  color: #B8BDC5;
}
.kb-form-basic-style .kb-radio-check-item label{
  color: #fff;
}