/* ===========================================================================
   site.css — the ONLY stylesheet we wrote. Safe to edit.

   Deliberately tiny. The forms are HubSpot's own markup captured verbatim, so
   the site's existing stylesheet (assets/css/<slug>.css) already styles them —
   an earlier version of this file re-implemented all that from computed values
   and did not match, because the page's CSS targets HubSpot's exact class
   structure and could not reach hand-written markup.

   Only two things are genuinely missing from the original CSS: a marker for a
   field we flagged as invalid, and the states our modal script toggles.
   =========================================================================== */

/* ---- the demo popup's base styles, for every template ----------------------
   The theme ships these with each page's captured stylesheet, but not every
   capture has them (the blog listing's did not, so the popup there collapsed
   to a narrow, unstyled box). One copy here, before the site's own popup rules
   further down, so every template gets the same popup. Copied from
   pages/blog/page.css (the theme's inline <style>).
   ------------------------------------------------------------------------- */
.request_a_demo.modal .patner-sec {
  font-size: 12px;
  color: #1e1e1e;
}
.request_a_demo.modal .patner-sec img {
  width: 80%;
}
.request_a_demo.modal .modal {
  top: 50px;
}
.request_a_demo.modal .bkp-demo-content {
  padding: 0rem 2.5rem;
}
.request_a_demo.modal .bkp-demo-frm {
  background-color: #fff;
  padding: 30px 50px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  color: #1e1e1e !important;
}
.request_a_demo.modal .bkp-demo-frm .details {
  color: #1e1e1e;
  font-size: 1.35rem !important;
  font-weight: 500;
  margin-bottom: 1.25rem;
}
.request_a_demo.modal .hbspt-form .hs-button[type='submit'] {
  width: -webkit-fill-available !important;
}
.request_a_demo.modal .modal-body {
  padding: 0px !important;
  background-color: #ffe9de;
  border-radius: 20px;
}
.request_a_demo.modal .modal-content {
  border-radius: 20px;
  box-shadow: 0px 18px 40px 0px rgba(0, 0, 0, 0.1);
}
.request_a_demo.modal .desricption {
  color: #1e1e1e;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
}
.request_a_demo.modal .demo-form-modal {
  padding: 0px !important;
}
.request_a_demo.modal .modal-dialog {
  max-width: 960px !important;
}
.request_a_demo.modal .hbspt-form .inputs-list {
  display: block !important;
}
.request_a_demo.modal .designation {
  font-size: 8px;
}
.request_a_demo.modal .designation span {
  font-size: 12px;
}
.request_a_demo.modal .designation hr {
  margin: 7px 0px;
  width: 48px;
  background-color: #fc7500;
}
.request_a_demo.modal .quote-content-case-study {
  color: #1e1e1e;
  font-size: 14px;
  font-weight: 500;
}
.request_a_demo.modal button.close {
  float: right;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: 0.5;
  position: absolute;
  right: 1rem;
  top: 1rem;
}
.request_a_demo.modal .bkp-demo-frm p {
  color: #1e1e1e;
  font-family: Poppins;
  font-size: 10px !important;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
}
.request_a_demo.modal .bkp-demo-frm p span {
  font-size: 10px !important;
}
@media screen and (max-width: 760px) {
  .request_a_demo.home_demo_ab .bkp-demo-content {
    display: none;
  }

  .request_a_demo.home_demo_ab .bkp-demo-frm {
    padding: 20px;
    border-radius: 20px;
  }

  .request_a_demo.home_demo_ab
    form.hs-form-0ecf725c-1588-4f3b-af27-694ee7402ec4_81d710d9-fc0a-44ab-bad4-03ea7beaed2a:not(.hs-video-form)
    .form-columns-2
    .hs-form-field
    .hs-input,
  form.hs-form-0ecf725c-1588-4f3b-af27-694ee7402ec4_81d710d9-fc0a-44ab-bad4-03ea7beaed2a:not(.hs-video-form)
    .form-columns-3
    .hs-form-field
    .hs-input {
    width: 100% !important;
  }
}
.request_a_demo.modal .modal-dialog,
#home_request_a_demo .modal-dialog {
  max-width: 960px !important;
}
.request_a_demo .modal-header {
  display: none;
}

/* Error text itself is styled by the page's own .hs-error-msg rules; this only
   marks the field so the border shows something is wrong. */
.hs-form-field.kosh-invalid .hs-input {
  border-color: #dc3545;
}

/* ---- modal behaviour -----------------------------------------------------
   The markup uses Bootstrap 4 attributes (data-toggle / data-dismiss) but one
   of these pages loads Bootstrap 5, which reads only data-bs-*. Where Bootstrap
   can handle a click it does, and assets/js/modals.js steps in only where it
   cannot. These rules provide the open state for that fallback path, matching
   Bootstrap's own so the two look identical.
   ------------------------------------------------------------------------- */
.modal.kosh-open {
  /* !important: some popups carry an inline style="display: none" from the capture */
  display: block !important;
  opacity: 1;
}
body.kosh-modal-open {
  overflow: hidden;
}
/* Same colour and z-index Bootstrap uses for .modal-backdrop.show, so a popup
   opened by either path looks the same. */
.kosh-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: #000;
  opacity: 0.5;
}
.modal.kosh-open {
  z-index: 1050;
}

/* ---- /resources/blogs/ : the 3x4 card grid --------------------------------
   The filter sidebar and the two card sections were replaced by one grid.
   Card chrome — the radius, the hover shadow, the tag pills' three-colour
   gradient rotation, the stretched link — still comes from the captured
   assets/css/blogs.css, because .content-card is reused. Only the grid layout
   and the banner are new, and they live here because this is the one
   stylesheet that is ours to edit. Breakpoints are Bootstrap's, since the
   captured sheet is a Bootstrap build.
   ------------------------------------------------------------------------- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 991.98px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575.98px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }
}

/* blogs.css gives .content-card `padding: 1.5rem 1.5rem 1.5rem 0` and then a
   different padding on :hover — a left-edge jump that was invisible in the old
   single-column list and makes every card in a grid twitch on hover. Both are
   neutralised, and the card needs no padding of its own now that the banner
   has to reach its edges. */
.blog-grid .content-card,
.blog-grid .content-card:hover {
  padding: 0;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.blog-grid .blog-card-banner {
  aspect-ratio: 16 / 7; /* the stock banners are about 1024x455 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #f2f2f2; /* a missing file reads as grey, not white */
}

.blog-grid .blog-card-body {
  padding: 1.25rem 1.25rem 1.5rem;
  flex: 1 1 auto;
}

#blogSentinel {
  height: 1px;
}
#blogLoading,
#blogEnd {
  text-align: center;
  padding: 2rem 0;
  color: #666;
}

/* The captured .content-card has no resting border — it only grows one on
   hover, which was fine for a full-width list row and leaves a grid of cards
   looking like text floating on the page. */
.blog-grid .content-card {
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  background: #fff;
  transition:
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}
.blog-grid .content-card:hover {
  border-color: #fc7500;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}
.blog-grid .content-card-title {
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.3;
} /* same card-title size as the home page cards */
.blog-grid .content-card-info-content p {
  margin-bottom: 0;
}

/* ---- /glossary/ : the few prose elements the captured chunk misses ---------
   assets/css/glossary.css is HighRadius's own Tailwind build, so it only
   contains the classes THEIR content needed. Kosh's articles use a wider set:
   `.prose h3` gets colour, size and weight there but no margins (Tailwind's
   preflight zeroes them), and Kosh averages about fourteen <h3> per term, so
   verbatim every heading welds to the paragraph above it. `.prose ol`,
   `blockquote` and `code` have no rules at all.
   ------------------------------------------------------------------------- */
.prose h3 {
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}
.prose ol {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
  list-style-type: decimal;
}
.prose ol li {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}
.prose a {
  color: #fc7500;
  text-decoration: underline;
}
.prose blockquote {
  margin: 1.5rem 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 3px solid #fc7500;
  color: #475569;
  font-style: italic;
}
.prose code {
  background: #f3f4f6;
  border-radius: 4px;
  padding: 0.1em 0.35em;
  font-size: 0.9em;
}

/* ---- Kosh theme ------------------------------------------------------------
   The client's brand theme, ported from www.kosh.ai: white/light surfaces,
   near-black text, and the signature orange -> pink -> purple gradient on the
   primary call-to-actions (kosh.ai's webflow sheet: linear-gradient(122deg,
   #ff762c, #ff3972 74%, #8924c8), with a #821dd7 -> #e92c4c secondary).
   ------------------------------------------------------------------------- */
:root {
  /* Kosh's own brand gradient starts on orange: the full #ff762c -> pink ->
     purple ramp from kosh.ai's webflow sheet. */
  --kosh-g: linear-gradient(122deg, #ff762c, #c4287f 52%, #8924c8);
  --kosh-g2: linear-gradient(87deg, #ff762c, #c4287f 48%, #8924c8);
  --kosh-pink: #ff3972;
  --kosh-orange: #ff762c; /* fallback for gradient-clipped text */
}

/* Header and hero call-to-action buttons: the gradient pill. */
#navbar-header .button,
.hero-cta .button.demo-btn,
a.button.button-banner,
.sticky-submenu .button {
  background: var(--kosh-g2);
  border: 0;
  color: #fff;
}
#navbar-header .button:hover,
.hero-cta .button.demo-btn:hover,
a.button.button-banner:hover {
  background: var(--kosh-g);
  border: 0;
  color: #fff;
  box-shadow: 0 4px 18px rgba(255, 57, 114, 0.35);
}

/* Nav links take the pink on hover instead of the old orange. */
#navbar-header .nav-link:hover,
#navbar-header .nav-link:focus,
#navbar-header .dropdown-item:hover {
  color: var(--kosh-pink);
}

/* The site's accent colour was a flat orange (#fc7500) everywhere. Heading
   accents get the gradient as text, with a solid fallback for browsers that
   cannot clip backgrounds to glyphs. */
.global-orange,
h1 .global-orange,
h2 .global-orange,
a.global-orange {
  color: var(--kosh-orange);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .global-orange {
    display: inline-block;
    background: var(--kosh-g);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

/* Generic body links pick up the pink. */
a:not(.button):not(.nav-link):not(.dropdown-item):hover {
  color: var(--kosh-pink);
}

/* ---- header must not change on scroll --------------------------------------
   The JS that hid it was removed from the page, but the CSS that did the hiding
   still exists in the captured stylesheet. Neutralised here in case any other
   script ever re-adds the classes. */
.header-section.fixed-top.hide-header {
  top: 0 !important;
}
.header-section.fixed-top.hide-header + div#dynamic-submenu {
  display: none !important;
}

/* ---- footer: the captured theme set 28px h2 / 24.5px h3, which reads like
   body copy, not a footer. Scaled down; hover picks up the pink. ---- */
footer h2,
footer .footer-h2 {
  font-size: 17px;
  line-height: 1.3;
}
footer h3,
footer h3 a,
footer a {
  font-size: 14.5px;
}
footer a:hover {
  color: var(--kosh-pink);
}

/* ---- ERP logos: the single composite strip (logos on white squares) was
   sliced into individual transparent logos. They float without backgrounds. ---- */
.erp-logos {
  gap: 14px 34px;
  padding: 18px 0 6px;
}
.erp-logos .erp-logo {
  height: 72px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
}

/* The hero briefly held a <video> with a play-btn overlay; it is a plain
   still image again, so those rules are gone. .vdo-con is just the wrapper. */
.vdo-con > img {
  width: 100%;
  display: block;
}

/* ---- Kosh sweep: no flat orange anywhere -----------------------------------
   The captured stylesheets make #fc7500 the default colour of buttons, links
   (a { color:#FC7500 }), tabs, icons, borders and shadows. Everything below
   maps that one colour onto the Kosh palette: the gradient for buttons and
   solid blocks, pink (#ff3972) for text and borders, dark text for plain links
   (the way kosh.ai itself renders them).
   ------------------------------------------------------------------------- */

/* Plain links: kosh.ai's body links are near-black, pink on hover. */
a,
a.orange-link {
  color: #1e1e1e;
}
a:hover {
  color: var(--kosh-pink);
}

/* ---- every orange button becomes the gradient pill ---- */
.button,
.button-two,
.button-three,
.button-four,
.button-five,
.black-button,
.learnmore-btn-wrap,
.basic-button,
.btn-orange,
.orange-button,
.btn-nav,
.map-tooltip .link-btn,
.freeda-button,
.contact-form input[type='submit'],
.hs-button[type='submit'],
.hbspt-form .hs-button[type='submit'],
.form-schedule .hbspt-form .hs-button[type='submit'],
.hubspotForm#hubspotForm iframe#hrcIframe#pardot-form .submit input,
#wt-cli-privacy-save-btn,
nav.alphabet-navigation a.button.button-invert.letter-block,
.page-inner-menu .sub-menu-item:hover,
.page-inner-menu .sub-menu-item.active,
.testimonials-case-studies button,
.filter-button.active,
.popTags .navbar-nav .nav-item.current-menu-item .nav-link,
.bg-\[\#FC7500\] {
  background: var(--kosh-g2);
  border: 0;
  color: #fff;
}
.button:hover,
.button-two:hover,
.button-three:hover,
.button-four:hover,
.button-five:hover,
.black-button:hover,
.learnmore-btn-wrap:hover,
.basic-button:hover,
.btn-orange:hover,
.orange-button:hover,
.btn-nav:hover,
.map-tooltip .link-btn:hover,
.freeda-button:hover,
.contact-form input[type='submit']:hover,
.hs-button[type='submit']:hover,
.hbspt-form .hs-button[type='submit']:hover,
.form-schedule .hbspt-form .hs-button[type='submit']:hover,
.hubspotForm#hubspotForm iframe#hrcIframe#pardot-form .submit input:hover,
#wt-cli-privacy-save-btn:hover,
nav.alphabet-navigation a.button.button-invert.letter-block:hover,
.page-inner-menu .sub-menu-item:hover,
.testimonials-case-studies button:hover,
.filter-button.active:hover,
.popTags .navbar-nav .nav-item.current-menu-item .nav-link:hover,
.bg-\[\#FC7500\]:hover {
  background: var(--kosh-g);
  border: 0;
  color: #fff;
  box-shadow: 0 4px 18px rgba(255, 57, 114, 0.35);
}

/* The "white button with orange text" variants (learnmore white-btn, freeda
   inverted) — the user wants no orange anywhere, so they become gradient too. */
.basic-button-learnmore-two.white-btn,
.basic-button-learnmore-three.white-btn,
.basic-button-learnmore-two.white-btn:hover,
.basic-button-learnmore-three.white-btn:hover {
  background: var(--kosh-g2);
  color: #fff;
  border: 0;
}

/* ---- orange TEXT accents -> pink, headings -> gradient text ---- */
.cmpny-learnmore,
.resources .cmpny-learnmore,
.cs-title-1,
.cta-block h3,
.wp-content-block h3,
.res-tab .ar-automation-heading-1 a,
.ar-automation-heading-1,
.ar-automation-heading-2,
.use-case-icon i,
.acrdn-cntnt a,
.faq-sec-menu li .nav-link.active,
.faq-sec-menu li .nav-link.active h3,
.accordion-section.active .icon:before,
.accordion-section.active .accordion-title .accordion-title-inner,
.accordion-section.active .accordion-title h3,
.finance-auto-sec a:hover,
.customer-wrapper:hover .customer-title,
.sp-links:hover,
.snd-menu-center .h3:hover,
.header-nav .navbar-nav .nav-link.free_demo-link:hover,
.header-nav .navbar-nav .nav-link.active,
.header-nav .navbar-nav .nav-link:hover,
.header-nav .whats-new .grid-block .h2 a:hover,
.res-tab-list.active .res-tab-list-title,
.fifth-fold .nav-pills .nav-link.active,
.hubspotForm#hubspotForm iframe#hrcIframe#pardot-form .submit input {
  color: var(--kosh-pink);
}
.header-nav .dropdown .dropdown-content a:hover {
  background: #fff0f4;
  color: var(--kosh-pink);
}

.section-heading,
.g-h2,
.ebook-header,
.res-right-sec .radiance-title {
  color: var(--kosh-orange);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .section-heading,
  .g-h2,
  .ebook-header,
  .res-right-sec .radiance-title {
    display: inline-block;
    background: var(--kosh-g);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

/* ---- orange underline bars / bullets / hr -> pink (gradient where wide) ---- */
.autonomous-link:before,
.footer-parent a:before,
.footer-sec span:before,
.about-company .col-md-6:first-child:after,
.events-info .date:before,
.gen-banner-wrap ul li:after,
.get-started-block .get-stated-count:before,
.key-takeaways-block ul li:before,
.trusted-companies h2:after,
.request_a_demo.modal .designation hr {
  background-color: var(--kosh-pink);
  background: var(--kosh-pink);
}
.checkbox-demo-consent input:checked ~ .checkmark,
.hbspt-form ul.inputs-list.multi-container li.hs-form-checkbox label input:checked + span::before {
  background-color: var(--kosh-pink);
}
.culture-sidebar .basic-button.button-blue.active:after,
.career-section,
.form-sidebar {
  background: var(--kosh-g2);
}

/* ---- orange borders -> pink ---- */
.credit-param,
.post_label a.Tag_1 {
  border-color: var(--kosh-pink);
}
.faq-sec-menu li .nav-link.active {
  border-bottom-color: var(--kosh-pink) !important;
}
.search-result-Blogs {
  background-color: #fff0f4;
  border-color: var(--kosh-pink);
}
.chatDemo {
  box-shadow: 0 18px 40px rgba(255, 57, 114, 0.18);
}

/* The hamburger was orange; kosh.ai's is near-black. */
.navbar-toggler-icon .draw-menu {
  background-color: #1e1e1e;
}

/* ---- sweep pass 2: inline-style stragglers and !important rules ----------- */
a.link-button,
.link-button {
  color: var(--kosh-pink) !important;
}
.post_label a,
.post_label a.Tag_1 {
  color: var(--kosh-pink);
}
a.active-breadcrumb,
.active-breadcrumb {
  color: var(--kosh-pink) !important;
}
.faq-sec-menu li .nav-link.active,
.faq-sec-menu li .nav-link.active h3 {
  color: var(--kosh-pink) !important;
}
button.nav-link.active {
  color: var(--kosh-pink) !important;
  border-color: var(--kosh-pink) !important;
}
.resources .cmpny-learnmore {
  color: var(--kosh-pink) !important;
}

/* Heading accents on the remaining pages: gradient text, same guarded pattern. */
.h1-vc,
.req_demo_title,
h1.wow,
.Quote {
  color: var(--kosh-orange);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .h1-vc,
  .req_demo_title,
  h1.wow,
  .Quote {
    display: inline-block;
    background: var(--kosh-g);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

/* ---- sweep pass 3: descendant-selector stragglers ---- */
.blog-wrapper a,
.blog-wrapper table td a {
  color: var(--kosh-pink);
}
.hero-banner a.active-breadcrumb {
  color: var(--kosh-pink) !important;
}
.brand #brandTab button.active,
.brand button:hover {
  color: var(--kosh-pink) !important;
  border-bottom-color: var(--kosh-pink) !important;
}
.toc-link:hover,
.toc-link.active {
  color: var(--kosh-pink);
}
.header-nav .navbar-nav .nav-link.active,
.header-nav .navbar-nav .nav-link:hover {
  border-color: transparent !important;
}
.use-case-tabs .nav-link.active {
  border: 0 !important;
}
/* the demo-request page's mobile heading, which lacks the req_demo_title class */
h1.d-md-none.d-block {
  color: var(--kosh-orange);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  h1.d-md-none.d-block {
    display: inline-block;
    background: var(--kosh-g);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

/* ---- sweep pass 4: the last one — Bootstrap pills in the how-it-works fold ---- */
.fifth-fold .nav-pills .nav-link,
.fifth-fold .nav-pills .nav-link.active {
  border-color: var(--kosh-pink);
}

/* ---- integration logos: an even grid, not a ragged flex row ----------------
   16 partner logos at wildly different aspect ratios (Sage is 3000x2000, Paytm
   167x88). A grid with a fixed row height and object-fit:contain gives every
   logo the same optical box, so they line up in columns instead of drifting.
   ------------------------------------------------------------------------- */
.erp-logos {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2.25rem 1.5rem;
  align-items: center;
  justify-items: center;
  max-width: 1100px;
  margin: 2.5rem auto 0;
  padding: 0 1rem;
}
.erp-logo-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 46px;
}
.erp-logos .erp-logo {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Full colour — these are the partners' own brand marks. */
  transition: transform 0.2s ease;
}
.erp-logos .erp-logo:hover {
  transform: scale(1.06);
}

@media (max-width: 991.98px) {
  .erp-logos {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 575.98px) {
  .erp-logos {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem 1rem;
  }
  .erp-logo-cell {
    height: 38px;
  }
}

/* ---- footer type: one more step down, on every page ---- */
footer h2,
footer .footer-h2 {
  font-size: 15px;
  line-height: 1.35;
}
footer h3,
footer h3 a,
footer a,
footer p,
footer li {
  font-size: 13px;
}
footer .copyright-wrapper,
footer .copyright-wrapper * {
  font-size: 12px;
}
/* The footer's section titles (.sol-head, "Solution Guide") sat at 18–20px and
   still shouted next to the 15px column headings. */
footer .sol-head,
footer h2.sol-head {
  font-size: 17px;
  line-height: 1.35;
}

/* ===========================================================================
   MEGA-MENU DRAWERS — vertical-only cascading lists, sized to their content
   ---------------------------------------------------------------------------
   Round 1 forced every panel into one identical box and, to fill it, split
   Product's and Solutions' active list into a 2-column CSS grid. That grid
   is what actually broke things: a 2/4/33-character item all got the SAME
   grid-cell width, so short items (a bold, chevron-marked "Bank
   Reconciliation") left their trailing arrow stranded far from the text with
   a dead gap before it, and one flat 7-item list visually read as two
   unrelated lists sitting side by side. Resources' and About Us' grids had
   the identical problem in miniature.

   Every list is single-column now — nothing is ever split across text
   columns again — and the shared box drops its forced 380x820 size in
   favour of a per-panel width (fixed, so hovering a different Product/
   Solutions rail item doesn't resize the panel out from under the pointer)
   and an auto height (so Resources/About Us, the two sparsest panels, don't
   carry the empty space a taller shared box left under them).

   Product and Solutions both keep a rail-beside-list arrangement (two
   adjacent single-column lists) rather than merging the rail and its result
   into one column — that's still "vertical" in the sense that matters here
   (no list is ever chopped into side-by-side text columns), and it's the
   layout used by most mega-menus for exactly this content shape.
   ------------------------------------------------------------------------- */
@media (min-width: 992px) {
  /* Each tab's <li> is a positioning context, so every panel centred under its
     OWN tab. Making the li static sends all five to the container instead, so
     they open in exactly the same place every time. This has to cover both
     spellings: Product/Solutions/Resources/About Us use `.dropdown`, while
     Customers uses the `.position-relative` utility (which is !important). */
  #navbar-header .navbar-nav > li.nav-item {
    position: static !important;
  }

  /* ---- the shared chrome — width is set per panel below, height is auto ---- */
  #navbar-header .navbar-nav .dropdown-menu {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    top: 64px !important;
    height: auto !important;
    max-height: calc(100vh - 110px);
    overflow: hidden auto;
    max-width: calc(100vw - 48px) !important;
    margin-top: 0.5rem !important;
    padding: 1.5rem 2rem !important;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 18px !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.12);
  }
  #navbar-header .navbar-nav .dropdown-menu > li {
    display: block;
    width: 100%;
  }
  #navbar-header .navbar-nav .dropdown-menu > li > .row,
  #navbar-header .navbar-nav .dropdown-menu > li > .solution-dropdown-wrapper-row {
    margin-left: 0;
    margin-right: 0;
  }

  /* ---- the centred titles are removed per the client's request. Hiding them
     here (rather than deleting the markup) reaches all three header partials
     that duplicate these five divs with different wording at once, and also
     removes the Resources panel's title-as-link to the un-rebranded
     highradius.com/resources/ — the only place that link existed. ---- */
  #navbar-header .product-dropdown-title,
  #navbar-header .solution-dropdown-title,
  #navbar-header .resources-dropdown-title,
  #navbar-header .about-us-dropdown-title,
  #navbar-header .customer-dropdown-title {
    display: none !important;
  }

  /* ---- shared list rhythm (Resources + About Us use the same markup) ----
     Both are ONE column now — that's the whole "vertical only" fix for
     these two: they had no rail, so the only thing making them look like a
     mega-menu at all was the multi-column grid, and that's exactly what
     read as messy once the title was removed. */
  #navbar-header .dropdown-menu ul.learn-transform {
    display: grid;
    grid-template-columns: 1fr;
    padding-left: 0;
    margin-bottom: 0;
    gap: 0.1rem;
  }
  #navbar-header .dropdown-menu .learn-transform-list {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 0;
    padding: 0.5rem 0.5rem;
    border-radius: 10px;
    transition: background-color 0.15s ease;
  }
  #navbar-header .dropdown-menu .learn-transform-list:hover {
    background: var(--kosh-surface);
  }
  #navbar-header .dropdown-menu ul.learn-transform a {
    width: auto;
    display: block;
  }

  /* ---- Product: icon rail beside ONE column of the active category's
     links (was a 2-column grid — see the block comment above) ---- */
  /* Rail of six groups beside the hovered group's sub-items — the same
     300px + list grid as Solutions. Item look: see "one menu item style"
     at the end of this file. */
  #navbar-header .dropdown-menu.product-dropdown {
    width: 700px !important;
  }
  #navbar-header .product-dropdown-wrapper-row {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 2.5rem;
  }
  #navbar-header .product-dropdown-wrapper-row .col-lg-3 ul {
    padding-left: 0;
    margin-bottom: 0;
  }
  #navbar-header .product-dropdown-wrapper-row > .col-lg-3,
  #navbar-header .product-dropdown-wrapper-row > .col-lg-4 {
    width: auto;
    max-width: none;
    flex: none;
    padding: 0;
  }
  #navbar-header .product-dropdown-wrapper-row > .col-lg-4 {
    display: block;
  }
  /* NB: [class$="-products"] would not match — the live list also carries
     `active`, so the attribute no longer ENDS with "-products". */
  #navbar-header .product-dropdown-wrapper-row ul[class*='-products'].active {
    display: block !important;
    margin: 0;
    padding-left: 0;
  }
  /* Each product title is followed by a decorative .hr-line sibling — drop it,
     a single column doesn't need it as a column separator. */
  #navbar-header .product-dropdown-wrapper-row ul[class*='-products'] > .hr-line {
    display: none;
  }
  /* The rail on the left has 1.5rem of air between its six items; the list on
     the right ran at 21px line-to-line and read as a solid block of text beside
     it. Matching the rail exactly would make the list very tall, so this is the
     middle: enough padding that each link is its own row, plus a real hit area.

     DESCENDANT selector, not a child one. The markup is
     ul.o2c-products > li.nav-li > a > div.product-title, so the `> .product-title`
     this replaced matched nothing at all — which is why the list had no padding
     and no hover fill despite a rule that looked like it supplied both. */
  #navbar-header .product-dropdown-wrapper-row ul[class*='-products'] .product-title {
    padding: 0.5rem 0.75rem;
    line-height: 1.45;
    border-radius: 10px;
    transition: background-color 0.15s ease;
  }
  #navbar-header .product-dropdown-wrapper-row ul[class*='-products'] .nav-li > a:hover .product-title {
    background: var(--kosh-surface);
  }
  /* Arrows/chevrons removed from every drawer per the client's request —
     the rail chevron and the active-item arrow in Product's list. */
  #navbar-header .product-dropdown-anchor.active::after,
  #navbar-header .navbar .product-title.active::after {
    display: none !important;
  }

  /* ---- Resources: one column of four ---- */
  #navbar-header .dropdown-menu.resources-dropdown {
    width: 300px !important;
  }
  #navbar-header .resources-dropdown-wrapper > .row > .col-lg-3 {
    width: 100%;
    max-width: none;
    flex: 0 0 100%;
    padding-left: 0;
  }

  /* ---- About Us: one column of six ---- */
  #navbar-header .dropdown-menu.about-us-dropdown {
    width: 300px !important;
  }
  #navbar-header .about-us-dropdown .row {
    display: block;
  }
  #navbar-header .about-us-dropdown .row > .col-lg-4 {
    width: 100%;
    max-width: none;
    flex: none;
    padding: 0;
  }

  /* ---- Solutions: rebuilt to be a byte-for-byte copy of Product's layout —
     a rail (col-lg-3) beside a single-column list (col-lg-4), same grid,
     same gap. The old version nested the industries list INSIDE the "By
     Industries" rail item and needed position:absolute + min-height + a JS
     hover-swap to fake a second column, which is exactly what kept breaking
     (an unconditional display rule left it always visible and taller than
     its reserved space, forcing an internal scroll). Solutions only ever
     had ONE real list — Integration has no sub-items, its own list was
     already commented out in the capture — so there's nothing to swap: the
     industries list is just always shown, the same way Product's rail is
     always shown regardless of which of ITS lists is active. No JS at all
     drives this panel now. */
  #navbar-header .dropdown-menu.solution-dropdown {
    width: 700px !important;
  }
  #navbar-header .solution-dropdown-wrapper-row {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 2.5rem;
  }
  #navbar-header .solution-dropdown-wrapper-row > .col-lg-3,
  #navbar-header .solution-dropdown-wrapper-row > .col-lg-4 {
    width: auto;
    max-width: none;
    flex: none;
    padding: 0;
  }
  /* The rail: two plain nav links, styled exactly like Product's rail items
     (bold label, small icon, hover highlight) — Product's own rail is bold
     unconditionally (`.product-suite { font-weight: 700 }`), not just on
     hover, so this matches that rather than the old hover-only bold. */
  #navbar-header .solution-dropdown .menu-level-1 {
    width: 100%;
  }
  #navbar-header .solution-dropdown .level-1-item {
    margin-bottom: 0.25rem;
  }
  #navbar-header .solution-dropdown .level-1-item > a.linkitem {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.5rem;
    border-radius: 10px;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--kosh-ink);
    transition: background-color 0.15s ease;
  }
  #navbar-header .solution-dropdown .level-1-item > a.linkitem:hover {
    background: var(--kosh-surface);
  }
  #navbar-header .solution-dropdown .level-1-item .menu-icon {
    width: 22px;
    height: 22px;
    max-height: none; /* the theme caps it at 1em */
    flex: 0 0 auto;
  }
  /* The list: single column, same row treatment as Product's .product-title
     (padding, radius, hover fill) — no more .active gate, no absolute
     positioning, it's a normal grid column now. */
  #navbar-header .solution-dropdown .menu-level-2 {
    display: block;
  }
  #navbar-header .solution-dropdown .menu-level-2 .level-2-item > a.linkitem {
    display: block;
    padding: 0.5rem 0.5rem;
    border-radius: 10px;
    font-size: 1rem;
    color: var(--kosh-ink);
    transition: background-color 0.15s ease;
  }
  #navbar-header .solution-dropdown .menu-level-2 .level-2-item > a.linkitem:hover {
    background: var(--kosh-surface);
  }
  /* Arrows/chevrons removed from this rail too, same as everywhere else. */
  #navbar-header .solution-dropdown .level-1-item > a.active::after,
  #navbar-header .solution-dropdown .level-1-item > a::after {
    display: none !important;
  }

  /* ---- Customers: link block + three cards. This is a promo card row, not
     a nav list, so it keeps its 3-across layout rather than stacking —
     "vertical only" targets the text lists above, which is what was actually
     unreadable. Only its box now auto-sizes like the rest. ---- */
  #navbar-header .dropdown-menu.customer-dropdown {
    width: 940px !important;
  }
  /* The circular arrow after "See Real-Life Case Studies..." — same removal. */
  #navbar-header .customer-dropdown .more-icon::after {
    display: none !important;
  }
  #navbar-header .customer-dropdown .row.align-items-center {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 2rem;
    align-items: center;
  }
  #navbar-header .customer-dropdown .row.align-items-center > .col-lg-3,
  #navbar-header .customer-dropdown .row.align-items-center > .col-lg-9 {
    width: auto;
    max-width: none;
    flex: none;
    padding: 0;
  }
  #navbar-header .customer-dropdown .nav-billboard-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    margin: 0;
  }
  #navbar-header .customer-dropdown .nav-billboard-row > .col-lg-4 {
    width: auto;
    max-width: none;
    flex: none;
    padding: 0;
  }
}

/* ---- footer base: the styling the product capture never had ----------------
   partials/contact/footer.html is shared by four templates, but the footer's
   base look lives in each page's GENERATED capture — and only some pages have
   it. pages/contact/page.css carries 34 footer rules; the product capture
   carries none at all. Same markup, so on the product page (and the glossary,
   another capture with no footer rules) it rendered as dark text on no
   background, with bulleted, indented lists, no side padding, and the social
   links showing as the words "Facebook", "X", "LinkedIn", "YouTube" instead of
   icons.

   These are those base rules, lifted out of the contact capture into the one
   stylesheet every page loads, so the shared footer looks the same everywhere.
   #1e1e1e is what --secondary-color resolves to, written literally because the
   glossary's Tailwind capture never defines that variable. They sit BEFORE our
   own footer tuning below, so that tuning still wins where the two overlap.
   ------------------------------------------------------------------------- */
footer {
  background: #1e1e1e;
  padding: 2rem;
  margin: 0;
}
footer h2,
footer h2 a,
footer .footer-h2,
footer .sol-head {
  color: #fff;
}
footer h3,
footer h3 a,
footer a {
  color: rgba(255, 255, 255, 0.7);
}
footer ul li {
  list-style: none;
}
footer ol,
footer ul {
  padding-left: 0;
}
/* Plain inline-SVG icons now (LinkedIn/X/Facebook/Instagram), not the old
   HighRadius sprite — that sprite is a fixed 4-icon strip with no Instagram
   glyph and an unwanted YouTube one, and Kosh has no YouTube channel. */
footer .social-media li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}
footer .social-media li a:hover {
  background: var(--kosh-pink);
  color: #fff;
}
footer .social-media li a svg {
  width: 16px;
  height: 16px;
}
/* The address is not a link and must not light up on hover. */
footer h3.corp-addr:hover,
footer h3.corp-addr:hover a {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 400;
}

/* ---- footer: shorter fold, lighter type, even spacing ----------------------
   Every link rendered bold at 13px across four dense columns, which is what
   made the fold look cluttered, and the bottom strip (address / social /
   email) sat on the 4-column grid with an empty fourth cell so nothing lined
   up. Note the bottom strip is a .row NESTED inside the main .row — selectors
   here have to distinguish the two.
   ------------------------------------------------------------------------- */
footer {
  padding-top: 1rem;
  padding-bottom: 0.75rem;
}

/* Headings keep their weight; the links under them do not. */
footer h2,
footer .footer-h2,
footer .sol-head {
  font-weight: 600;
  margin-bottom: 0.3rem;
}
footer h3,
footer h3 a {
  font-weight: 400;
}
footer h3 {
  margin: 0 0 0.1rem;
  line-height: 1.35;
}
footer h3 + h2,
footer h3 + .footer-h2 {
  margin-top: 0.7rem;
}

/* Left-align the columns and their headings together (per the client's
   request — the earlier centred layout is gone). */
footer .container > .row > [class*='col-'] {
  text-align: left;
}
/* Bootstrap's own .row is display:flex; the "Solutions" heading is a bare
   sibling of the col-md-3 divs inside it, not wrapped in its own column. On
   templates whose capture defines .row as flex (blog-post, landing — this
   footer is now shared with both), that left it sized to its own content and
   sitting beside the columns, vertically centred in the row, instead of as a
   full-width heading above them. Forcing it onto its own line fixes that
   regardless of which page.css this footer happens to be paired with. */
footer .sol-head {
  width: 100%;
  flex: 0 0 100%;
  text-align: left;
  justify-content: flex-start !important;
  margin-bottom: 0.5rem;
}
footer .sol-head .hr-line {
  display: none;
}

/* The bottom strip: one left-aligned row, evenly spaced, on its own rule. */
footer .row .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.75rem 4rem;
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin: 0.75rem 0 0;
  padding-top: 0.75rem;
}
footer .row .row > [class*='col-'] {
  flex: 0 1 auto;
  width: auto;
  max-width: none;
  text-align: left;
}
footer .social-media {
  justify-content: flex-start !important;
  gap: 1.1rem;
  margin-top: 0.4rem !important;
  padding-left: 0;
}
footer .corp-addr {
  margin-bottom: 0.15rem;
}

/* ===========================================================================
   Kosh sweep, round 2 — the orange the first pass could not reach.

   The first sweep matched the literal hex #fc7500 in colour PROPERTIES. That
   missed three whole categories, which is why orange kept showing up:
     1. nineteen other orange hexes (#ff6f00 on the table header, #f68004,
        #ff6e27, #f16e00, #ff6b00, #fd7e14 …)
     2. SVG artwork — data-URI backgrounds here, and .svg files on disk
        (those are fixed by recolour-assets.mjs, not by CSS)
     3. rgba() tints and the --primary-color custom property
   =========================================================================== */

/* The single highest-leverage line: every page declares
   `--primary-color: #fc7500` in :root, and anything consuming it inherits the
   orange. Redefining it here fixes .button-text-link, .h1-vc, .link-button and
   anything added later, all at once. */
:root {
  --primary-color: #ff3972;
  --kosh-ink: #2d2d2d; /* the "darker foreground" for selected states */
  --kosh-surface: #f3f3f3; /* the light surface those sit on */
  --kosh-sky: #d8f2fd; /* Kosh sky blue, as used by .benefits-section */
}

/* ---- CTA chevrons: white chevron by default, white circle + pink on hover --
   The captured `.button::after` is ONE data-URI SVG holding both a white
   circle and an orange chevron, and its hover state swaps in an ORANGE circle.
   At rest we show a plain chevron (white on the gradient pill, brand pink on
   the transparent link-button) with no circle; on hover the white circle
   appears and the chevron takes the brand pink. The pseudo-element's reserved
   padding still holds the layout, so nothing reflows.
   ------------------------------------------------------------------------- */
.button::after,
.link-button::after {
  opacity: 1;
  transition: opacity 0.18s ease;
}
.button::after {
  background-image: url("data:image/svg+xml,%3Csvg width='39' height='40' viewBox='0 0 39 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.0588 27.3331L22.9411 20.4507L16.0588 13.5684' stroke='white' stroke-width='2.29412' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") !important;
}
.link-button::after {
  background-image: url("data:image/svg+xml,%3Csvg width='39' height='40' viewBox='0 0 39 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.0588 27.3331L22.9411 20.4507L16.0588 13.5684' stroke='%23ff3972' stroke-width='2.29412' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") !important;
}
.button:hover::after,
.link-button:hover::after,
.button:focus-visible::after,
.link-button:focus-visible::after {
  opacity: 1;
  /* white filled circle + pink chevron — never orange */
  background-image: url("data:image/svg+xml,%3Csvg width='39' height='40' viewBox='0 0 39 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='19.5' cy='20.4507' r='19.5' fill='white'/%3E%3Cpath d='M16.0588 27.3331L22.9411 20.4507L16.0588 13.5684' stroke='%23ff3972' stroke-width='2.29412' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") !important;
}
/* The captured pill reserves 56px (link-button 40px) on the right for the
   chevron, which is visible at rest again — keep those values. */
.button {
  padding-right: 56px;
}
.link-button {
  padding-right: 40px;
}

/* ---- tab switchers: light surface, DARK GREY selected ---------------------
   Previously the active pill took the Kosh gradient, and a separate rule
   gradient-clipped its text — gradient text on a gradient fill, which rendered
   the label unreadable. Selected state is now a flat dark pill.
   ------------------------------------------------------------------------- */
.use-case-tabs {
  background: var(--kosh-surface);
}
.use-case-tabs .nav-link.active,
.use-case-tabs .nav-link.active:hover,
.business-unit-tabs-wrapper .nav-tabs .nav-item a.active,
.business-unit-tabs-wrapper .nav-tabs .nav-item a.active:hover,
.content-category-tab .tag-link.active {
  background: var(--kosh-ink) !important;
  background-image: none !important;
  border-color: var(--kosh-ink) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important; /* beat the gradient-text clip */
  box-shadow: none;
}

/* The "How Kosh AI Automates" vertical pills, plus the orange caret. */
.fifth-fold .nav-pills .nav-link.active {
  background: var(--kosh-ink) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-color: var(--kosh-ink) !important;
  border-left-color: var(--kosh-ink) !important;
}
/* The caret was an <img> of orange-right-arrow.svg hanging off the active
   pill. The user asked for it gone, not recoloured. */
.fifth-fold .nav-pills .nav-link.active::before {
  display: none !important;
}

/* ---- navbar: light bar, dark-grey selected, links beside the logo ---------
   The capture made ul.navbar-nav a dark #474747 pill with white links and a
   white pill on the active item. Inverted to match the tab switchers.
   ------------------------------------------------------------------------- */
#navbar-header ul.navbar-nav,
#navbar-header .global-lang {
  background: var(--kosh-surface);
}
#navbar-header a.nav-link,
#navbar-header .navbar-nav .show > .nav-link,
#navbar-header .nav-link:focus {
  color: #1e1e1e;
}
#navbar-header .nav-item a.nav-link.active {
  background: var(--kosh-ink);
  color: #fff;
}
#navbar-header .global-region .nav-item a.nav-link.active svg g path {
  fill: #fff;
}

@media (min-width: 992px) {
  /* The container is the positioning context for all three header pieces AND
     for the drawers. It is centred in the viewport, so "50% of the container"
     is the viewport centre. */
  #navbar-header .navbar > .container-fluid {
    position: relative;
  }

  /* Brand and CTA both come out of flow so the collapse spans the FULL
     container. Left in flow, the brand eats the first ~200px and "centre the
     nav" then centres it in the space after the logo — half a logo-width
     right of the real centre. */
  #navbar-header .navbar-brand {
    position: absolute;
    left: calc(var(--bs-gutter-x, 1.3125rem) / 2);
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
  }
  #navbar-header .navbar-collapse .global-region {
    width: 100%;
    justify-content: center;
    position: static; /* drawers must resolve against the container, not this */
  }
  #navbar-header .navbar-collapse .global-region > ul.navbar-nav {
    margin: 0 auto;
  }
  #navbar-header .navbar-collapse .global-region > .button {
    position: absolute;
    right: calc(var(--bs-gutter-x, 1.3125rem) / 2);
    top: 50%;
    transform: translateY(-50%);
  }
}

/* ---- FAQ accordion +/− glyphs: centre them on the circle behind ----------
   The captured minus is a 3rem TEXT glyph with a translateY(-50%) offset that
   drifts off the 2rem circle, and its active-state rule outranks ours. So we
   drop the text glyphs entirely and draw the +/− as centred CSS bars on the
   circle's exact box — dead centre regardless of font metrics. */
.accordion-title .icon:before {
  content: '';
  top: -1px;
  left: -23.5px;
  right: auto;
  width: 2rem;
  height: 2rem;
  transform: none;
  color: transparent;
  /* plus: two centred bars */
  background-image: linear-gradient(#1e1e1e, #1e1e1e), linear-gradient(#1e1e1e, #1e1e1e);
  background-size:
    15px 2.5px,
    2.5px 15px;
  background-position: center;
  background-repeat: no-repeat;
}
.accordion-section.active .accordion-title .icon:before {
  content: '';
  top: -1px;
  left: -23.5px;
  right: auto;
  width: 2rem;
  height: 2rem;
  transform: none;
  color: transparent;
  /* minus: one centred bar, brand pink */
  background-image: linear-gradient(var(--kosh-pink), var(--kosh-pink));
  background-size: 16px 2.5px;
  background-position: center;
  background-repeat: no-repeat;
}

/* the product page's SEO link strip above the footer: match the footer's
   compact line-height instead of the captured 2.25rem row gap */
.finance-auto-sec h3 {
  line-height: 1.35;
  margin: 0.75rem 0 0.25rem;
}
.finance-auto-sec a {
  line-height: 1.35;
}

/* ---- table headers: solid Kosh sky blue ----------------------------------
   `th { background-color: #ff6f00 }` — a DIFFERENT orange from #fc7500, which
   is exactly why the first sweep never saw it. */
th,
.comparison-table th {
  background-color: var(--kosh-sky) !important;
  color: #1e1e1e !important;
}

/* ---- the remaining CSS oranges, by category ---- */
.featured-banner-wrapper .button,
.hbspt-form ul.inputs-list.multi-container li.hs-form-checkbox label span::before,
#pardot-form .submit,
.sticky-on-scroll a#request_a_demo_24317_112_hrc:hover {
  border-color: var(--kosh-pink) !important;
}
#pardot-form .submit {
  background: var(--kosh-g2) !important;
  color: #fff !important;
}
.freeda-button {
  color: var(--kosh-pink) !important;
}
.freeda-button:hover {
  background: var(--kosh-g) !important;
  color: #fff !important;
}

/* orange gradient border on the form card, and the warm tints */
.form {
  background-image:
    linear-gradient(#fff, #fff), linear-gradient(180deg, #ff3972 0%, rgba(0, 0, 0, 0) 100%) !important;
}
.resources {
  background: rgba(255, 57, 114, 0.06) !important;
}
.use-case-icon {
  background: rgba(255, 57, 114, 0.1) !important;
}
.or-box,
.bl-box {
  background-color: #fff0f4 !important;
}

/* company-overview / demo-request orange glows */
.chatDemo,
.demo-glow {
  box-shadow: 0 2px 20px rgba(255, 57, 114, 0.25) !important;
}

/* ---- glossary: Tailwind arbitrary-value orange ---- */
.text-\[\#FC7500\],
.hover\:text-\[\#FC7500\]:hover,
.group-hover\:text-\[\#FC7500\]:is(:where(.group):hover *),
.text-\[\#FF6B00\],
.text-\[\#f16e00\],
.hover\:text-\[\#f16e00\]:hover,
.progress-content a {
  color: var(--kosh-pink) !important;
}
.bg-\[\#f16e00\],
.bg-\[\#FC7500\] {
  background-color: var(--kosh-pink) !important;
}

/* ---- the last of it: default-state list markers, animated borders ---------
   li::after / .actions::after were orange arrow markers; the button chevron
   rest states are handled in the CTA chevron section above.
   ------------------------------------------------------------------------- */
li::after,
.actions::after {
  background-image: url("data:image/svg+xml,%3Csvg width='39' height='40' viewBox='0 0 39 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='19.5' cy='20.4507' r='19.5' fill='white'/%3E%3Cpath d='M16.0588 27.3331L22.9411 20.4507L16.0588 13.5684' stroke='%23ff3972' stroke-width='2.29412' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
/* the demo-request page animates an orange bar around the form card */
.border-aimation {
  background-image: linear-gradient(90deg, #ff3972, #8924c8) !important;
}

/* ---- final stragglers -----------------------------------------------------
   Each of these needed its own selector: the page rules are more specific than
   the generic ones above, or the colour lives on an SVG presentation attribute.
   ------------------------------------------------------------------------- */

/* list bullets and the HubSpot submit arrow on /demo-request/ */
.gen-banner-wrap ul li:after {
  background-color: var(--kosh-pink) !important;
}
.content-data ul li:after,
.hbspt-form .hs_submit .actions:after {
  background-image: url("data:image/svg+xml,%3Csvg width='39' height='40' viewBox='0 0 39 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='19.5' cy='20.4507' r='19.5' fill='white'/%3E%3Cpath d='M16.0588 27.3331L22.9411 20.4507L16.0588 13.5684' stroke='%23ff3972' stroke-width='2.29412' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") !important;
}

/* the blog page's sticky CTA strip: warm tint + warm hairlines.
   Scoped to .hero-after-header so the product page's hero "Contact Us"
   wrapper (also .hero-cta) keeps a clean white background. */
.hero-cta.hero-after-header {
  background: #fff0f4 !important;
  border-top-color: rgba(255, 57, 114, 0.35) !important;
  border-bottom-color: rgba(255, 57, 114, 0.35) !important;
}

/* An inline <svg><path fill="#FC7500"> in the blog body. A presentation
   attribute loses to CSS, so this reaches it without touching the markup. */
svg path[fill='#FC7500'],
svg path[fill='#fc7500'] {
  fill: var(--kosh-pink) !important;
}

/* Glossary Tailwind arbitrary values are CASE-SENSITIVE — the lowercase
   #ff6b00 variants are separate classes from the uppercase ones. */
.bg-\[\#ff6b00\] {
  background-color: var(--kosh-pink) !important;
}
.text-\[\#ff6b00\],
.hover\:text-\[\#ff6b00\]:hover,
.group-hover\:text-\[\#ff6b00\]:is(:where(.group):hover *) {
  color: var(--kosh-pink) !important;
}
.border-\[\#ff6b00\] {
  border-color: var(--kosh-pink) !important;
}

/* ===========================================================================
   THE BLOG
   /resources/blogs/ and the posts under /resources/Blog/<slug>/, which are
   written in the CMS at /admin/ and rendered by lib/blog.mjs.

   The captured Trifecta-Resources stylesheet already supplies the card grid,
   the tag pills and the page chrome. What it has no rules for is a post that
   this site itself renders — production's blog posts were one hand-built page
   each, so there is no reusable article style to inherit. These are those
   rules, and nothing here applies to any other page.
   =========================================================================== */

/* ---- the listing masthead ---- */
.blogs-masthead {
  padding: 3rem 0 1rem;
  max-width: 46rem;
}
.blogs-masthead h1 {
  /* The capture's headings are `text-transform: capitalize`, which turns
     "Kosh.ai" into "Kosh.Ai". */
  text-transform: none;
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 0.75rem;
  color: var(--kosh-ink);
}
.blogs-masthead p {
  font-size: 1.125rem;
  line-height: 1.6;
  color: #5a5a5a;
  margin-bottom: 0;
}
@media (max-width: 767px) {
  .blogs-masthead {
    padding: 2rem 0 0.5rem;
  }
  .blogs-masthead h1 {
    font-size: 2rem;
  }
}

/* ---- a post ----
   The top padding clears the navbar, which is `position: fixed` on every
   template: at 2.5rem the breadcrumb rendered underneath it and simply was
   not there. 65px of bar, plus room to breathe. */
.blog-post-hero {
  padding: 7.5rem 0 1.5rem;
}

/* No max-width here on purpose. A post uses the theme's own .container — the
   same 1150px the product page uses — so the blog is as wide as the rest of
   the site rather than a narrow column with 400px of white on either side.
   The cover image is capped below, because a 1150px-wide banner on a 1000px
   source is just an upscaled blur. */
.blog-post-hero .breadcrumb-wrap {
  font-size: 0.875rem;
  color: #7a7a7a;
  margin-bottom: 1.25rem;
}
.blog-post-hero .breadcrumb-wrap a {
  color: #7a7a7a;
}
.blog-post-hero .breadcrumb-wrap a:hover {
  color: var(--kosh-pink);
}
.blog-post-hero .breadcrumb-wrap .current {
  color: var(--kosh-ink);
}
.blog-post-hero h1 {
  /* The capture capitalizes every h1/h2, which retitles the post:
     "Breaks At Scale". */
  text-transform: none;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--kosh-ink);
}
.blog-post-meta {
  margin: 0.875rem 0 0;
  color: #7a7a7a;
  font-size: 0.9375rem;
}

.blog-post-body {
  padding: 0 0 4rem;
}
.blog-post-cover {
  display: block;
  width: 100%;
  max-width: 62rem;
  height: auto;
  border-radius: 12px;
  margin-bottom: 2.5rem;
}

/* The article itself. It spans the full container per the client's "uniform
   with the home page"; the type steps up a size to keep a 1150px line legible,
   since the eye has further to travel back to the next line. */
.blog-post-content {
  font-size: 1.125rem;
  line-height: 1.8;
  color: #3a3a3a;
}
.blog-post-content > *:first-child {
  margin-top: 0;
}
.blog-post-content p {
  margin-bottom: 1.375rem;
}
.blog-post-content h2 {
  text-transform: none; /* same `h1, h2 { text-transform: capitalize }` */
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--kosh-ink);
  margin: 2.5rem 0 1rem;
}
.blog-post-content h3 {
  font-size: 1.3125rem;
  font-weight: 600;
  color: var(--kosh-ink);
  margin: 2rem 0 0.75rem;
}
.blog-post-content h4 {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 1.75rem 0 0.5rem;
}
.blog-post-content ul,
.blog-post-content ol {
  margin: 0 0 1.375rem 1.25rem;
  padding-left: 0.75rem;
}
/* `li { list-style: none }` in the capture strips the markers, and it beats a
   list-style on the ul — the property is inherited, so the li's own rule wins
   whatever the parent says. Set it on the item. */
.blog-post-content ul > li {
  list-style-type: disc;
}
.blog-post-content ol > li {
  list-style-type: decimal;
}
.blog-post-content li {
  margin-bottom: 0.5rem;
}
.blog-post-content li::marker {
  color: var(--kosh-pink);
}
.blog-post-content a {
  color: var(--kosh-pink);
  text-decoration: underline;
}
.blog-post-content strong {
  color: var(--kosh-ink);
  font-weight: 600;
}
.blog-post-content img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 1.5rem 0;
}
.blog-post-content blockquote {
  margin: 2rem 0;
  padding: 0.25rem 0 0.25rem 1.5rem;
  border-left: 3px solid var(--kosh-pink);
  color: var(--kosh-ink);
  font-size: 1.1875rem;
  line-height: 1.6;
}
.blog-post-content blockquote p:last-child {
  margin-bottom: 0;
}
.blog-post-content pre {
  background: var(--kosh-surface);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
  margin-bottom: 1.5rem;
}
.blog-post-content pre code {
  font-size: 0.9375rem;
  line-height: 1.6;
}
.blog-post-content :not(pre) > code {
  background: var(--kosh-surface);
  border-radius: 4px;
  padding: 0.1em 0.35em;
  font-size: 0.9375em;
}
.blog-post-content hr {
  margin: 2.5rem 0;
  border: 0;
  border-top: 1px solid #e6e6e6;
}
.blog-post-content table {
  width: 100%;
  margin-bottom: 1.5rem;
  border-collapse: collapse;
}
.blog-post-content th,
.blog-post-content td {
  border: 1px solid #e6e6e6;
  padding: 0.625rem 0.875rem;
  text-align: left;
}
.blog-post-content th {
  background: var(--kosh-surface);
  font-weight: 600;
}

.blog-post-cta {
  margin-top: 3rem;
}

@media (max-width: 767px) {
  .blog-post-hero h1 {
    font-size: 1.875rem;
  }
  .blog-post-content {
    font-size: 1rem;
  }
  .blog-post-content h2 {
    font-size: 1.5rem;
  }
}

/* ---- the resources / blog-post navbar -------------------------------------
   Two of the three header partials come from the Trifecta-Resources theme, not
   the main one, and their capture carries rules the main capture does not:

     #navbar-header #navbarScroll a.nav-link { color: #fff !important }

   Two IDs and !important, against the one-ID rule above — so on those pages the
   nav bar was rebranded to a light pill and the links stayed white on it, i.e.
   invisible. Same markup, same intent, higher specificity.
   ------------------------------------------------------------------------- */
/* The tab strip on these two templates was visibly shorter than the main
   theme's — a 65px bar against 79px — and everything in it (logo, pill, CTA)
   therefore sat at a different height. Two declarations differ between the
   captures, and these are the main theme's own values. */
/* !important because the capture's own `#navbar-header a.nav-link { font-size:
   0.9rem !important }` is what shrank the text — and 0.9rem is 12.6px here,
   not 14.4px, because this theme sets the root to 14px. Hence px, not rem. */
#navbar-header .global-nav a.nav-link {
  padding: 7px 11.2px;
  font-size: 14px !important;
}
#navbar-header .navbar > .container-fluid {
  padding-left: 10.5px;
  padding-right: 10.5px;
}

/* The blog-post capture paints .navbar itself #f3f3f3 — the same grey as the
   nav pill, so on those pages the pill vanished into a full-width grey band and
   the header stopped looking like the one on every other page. */
#navbar-header .navbar {
  background-color: #fff;
}

#navbar-header #navbarScroll a.nav-link,
#navbar-header #navbarScroll .navbar-nav .show > .nav-link,
#navbar-header #navbarScroll .nav-link:focus {
  color: #1e1e1e !important;
}
#navbar-header #navbarScroll .nav-item a.nav-link.active {
  background: var(--kosh-ink);
  color: #fff !important;
}

@media (min-width: 992px) {
  /* .global-nav { margin-right: 1rem !important } in the same capture beats the
     `margin: 0 auto` that centres the menu — with only margin-left auto left
     standing, the whole nav is pushed right and ends up under the CTA. */
  #navbar-header .navbar-collapse .global-region > ul.navbar-nav {
    margin: 0 auto !important;
  }
}

/* ---- footer on a phone -----------------------------------------------------
   The columns stack below 768px (col-md-3), which is right — but stacked, the
   desktop rhythm reads as one undifferentiated list of 49 links. These give
   each group a visible top and some air between rows, and lift the link type
   off the 12px the desktop grid can get away with.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  footer .container > .row > div[class*='col-'] {
    margin-bottom: 1.75rem;
  }
  footer h2 {
    margin-bottom: 0.625rem;
  }
  footer h3 {
    margin-bottom: 0.5rem;
    line-height: 1.4;
  }
  footer h3 a {
    font-size: 0.9375rem;
  }
  /* The bottom strip: address, socials and "Send Your Queries" one under the
     other rather than three squeezed columns. */
  footer .row .row {
    flex-direction: column;
    gap: 1.5rem;
  }
  footer .social-media {
    justify-content: flex-start;
  }
}

/* The shared "Book a Demo" modal (partials/modals.html) never asks which
   solutions the visitor wants. The home page's captured CSS hid that group for
   #home_request_a_demo; the blog pages' CSS only hid it for their old copies of
   the modal. Hidden here so the one modal looks the same on every page. */
#home_request_a_demo .hs_hrc_which_solutions_are_you_interested_in_ {
  display: none;
}

/* ---- The CTA forms: the "Book a Demo" popup and /demo-request ----------
   Left: the heading and line above the form. Right: partials/cta-panel.html —
   one client testimonial at a time (assets/js/kosh-testimonials.js), then the
   G2 rating and the compliance badges in one white box. */
.kh-cta-title {
  margin: 0 0 0.6rem;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  text-transform: none;
  color: #1e1e1e;
}
.kh-cta-lede {
  margin: 0 0 1.4rem;
  font-size: 0.98rem;
  font-weight: 400;
  line-height: 1.55;
  color: #4a4f57;
}
/* Which heading the popup shows: the usual one when a button opens it, the
   invitation when kosh-autopopup.js opens it by itself (.kh-auto). */
#home_request_a_demo .kh-cta-when-auto,
#home_request_a_demo.kh-auto .kh-cta-when-clicked {
  display: none;
}
#home_request_a_demo.kh-auto .kh-cta-when-auto {
  display: block;
}
.request_a_demo.modal .bkp-demo-content {
  align-self: center;
  padding: 2rem 2.25rem;
}

.kh-cta-panel {
  font-weight: 500;
  color: #1e1e1e;
}
.kh-cta-quote-mark {
  display: block;
  width: 40px;
  height: auto;
  margin-bottom: 0.9rem;
}
/* All slides share one grid cell, so the panel keeps the tallest one's height
   whichever is showing and nothing below it moves. */
.kh-mtesti-track {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.kh-mtesti-slide {
  grid-area: 1 / 1;
  min-width: 0;
  margin: 0;
  visibility: hidden;
}
.kh-mtesti-slide.is-on {
  visibility: visible;
}
.kh-mtesti-quote {
  margin: 0 0 1.15rem;
  padding: 0;
  border: 0;
}
.kh-mtesti-quote p {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.6;
  color: #1e1e1e;
}
/* laid out like the home page's testimonial cards (.kh-quote figcaption in
   kosh-home.css): photo, name and company on the left, logo on the right */
.kh-mtesti-who {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(30, 30, 30, 0.14);
}
.kh-mtesti-name {
  flex: 1 1 auto;
  min-width: 0;
}
.kh-mtesti-name strong {
  display: block;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1e1e1e;
}
.kh-mtesti-name span {
  display: block;
  margin-top: 2px;
  font-size: 0.95rem;
  font-weight: 500;
  color: #5b6270;
}
.kh-mtesti-logo {
  display: block;
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  max-width: 120px;
  max-height: 40px;
  object-fit: contain;
  object-position: right center;
}
/* The client's photo, framed on their face: --fx/--fy is the face's centre as
   a fraction of the photo, --h the photo's height as a multiple of the frame,
   --a its aspect ratio. The face lands at the frame's centre (45% down) and the
   clamps keep the photo covering the frame, so no edge shows. */
.kh-face {
  position: relative;
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  overflow: hidden;
  border-radius: 50%;
  background: #b9cdc6;
}
.kh-face img {
  position: absolute;
  top: clamp(calc(100% - var(--h) * 100%), calc(45% - var(--fy) * var(--h) * 100%), 0%);
  left: clamp(
    calc(100% - var(--a) * var(--h) * 100%),
    calc(50% - var(--fx) * var(--a) * var(--h) * 100%),
    0%
  );
  width: auto;
  max-width: none;
  height: calc(var(--h) * 100%);
}
.kh-cta-trust {
  margin-top: 1.75rem;
}
/* The G2 banner and the three badges in one row, sized to the box's width
   (cqi), so the row always fits: the banner is ~3.3 x as wide as it is tall,
   the badges about square. */
/* As tall and as rounded as the form's Submit button: kosh-testimonials.js
   sets --kh-box-h and --kh-box-r from it, and the icons fill the box less 5px
   top and bottom. */
.kh-cta-trust-box {
  container-type: inline-size;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: var(--kh-box-h, auto);
  padding: 5px 14px;
  background: #fff;
  border-radius: var(--kh-box-r, 8px);
  box-shadow: 0 8px 20px rgba(30, 30, 30, 0.08);
}
.kh-cta-trust-row {
  --kh-h: min(calc(var(--kh-box-h, 54px) - 10px), 11cqi);
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: min(14px, 3cqi);
}
/* the banner image has a thin grey frame and white margins: crop to the banner */
.kh-cta-g2 {
  display: block;
  flex: 0 0 auto;
  width: auto;
  height: var(--kh-h);
  aspect-ratio: 400 / 120;
  object-fit: cover;
  object-position: 50% 43%;
  clip-path: inset(0 1% round var(--kh-box-r, 6px));
}
.kh-cta-badges {
  display: contents;
}
.kh-cta-badges img {
  display: block;
  flex: 0 0 auto;
  width: auto;
  height: var(--kh-h);
}

/* Phones: the form alone, as the original theme intended (its home_demo_ab
   rule never matched this modal, so the panel spilled off the side). */
@media (max-width: 767.98px) {
  #home_request_a_demo .bkp-demo-content {
    display: none;
  }
  #home_request_a_demo .bkp-demo-frm {
    flex: 1 1 auto;
    max-width: 100%;
    border-radius: 20px;
  }
}

/* Mobile Product list (the accordion of sub-items is gone): six plain links. */
.product-dropdown-row-sm-device .kh-sm-products {
  list-style: none;
  padding: 0;
  margin: 0;
}
.product-dropdown-row-sm-device .kh-sm-products li a {
  display: block;
  padding: 0.55rem 0;
}

/* ---- nav icons: CSS masks painted in the text colour, so an icon changes
   colour with its label on hover (an <img> SVG can't be recoloured) ---- */
.kh-nav-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

/* ---- menu transitions: colour and background only ----
   The Product panel swaps between its six lists by toggling visibility. The
   blog pages' captured stylesheet gives every link `transition: all .3s`, which
   also animates that visibility: for 0.3s the old list stayed visible and
   clickable over the new one. The text looked doubled, and a quick click could
   land on an old "Contact Us" item and open the demo form. Menu links animate
   colour and background only, on every page. */
#navbar-header .dropdown-menu a,
#navbar-header .dropdown-menu a * {
  transition-property: color, background-color, border-color !important;
  transition-duration: 0.15s !important;
}
#navbar-header .dropdown-menu ul[class*='-products'],
#navbar-header .dropdown-menu ul[class*='-products'] li {
  transition: none !important;
}

/* ---- one menu item style for every tab (Product, Solutions, Resources,
   About Us), taken from the Resources menu: icon then 14px text in dark
   grey; on hover a light grey fill, bold, and Kosh pink for text AND icon.
   Sub-item lists (Product's, the industries) are the same row, text only. ---- */
@media (min-width: 992px) {
  /* the row: the element that carries the padding and the hover fill */
  #navbar-header .dropdown-menu .learn-transform-list,
  #navbar-header .product-dropdown-anchor,
  #navbar-header .product-dropdown-wrapper-row ul[class*='-products'] .product-title,
  #navbar-header .solution-dropdown .level-1-item > a.linkitem,
  #navbar-header .solution-dropdown .level-2-item > a.linkitem {
    display: flex !important;
    align-items: center;
    gap: 0.75rem;
    min-height: 42px;
    padding: 0.5rem !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 10px;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: var(--kosh-ink) !important;
    background: transparent;
    transition:
      background-color 0.15s ease,
      color 0.15s ease;
  }
  #navbar-header .dropdown-menu .learn-transform-list {
    margin-bottom: 0 !important;
  }
  /* main items (Product and Solutions rails, and every item of the single-
     column menus) are always bold; sub-item lists stay regular */
  #navbar-header .dropdown-menu .learn-transform-list,
  #navbar-header .product-dropdown-anchor,
  #navbar-header .solution-dropdown .level-1-item > a.linkitem {
    font-weight: 700 !important;
  }
  /* Solutions is sized by its content (two short columns), not a fixed 700px */
  #navbar-header .dropdown-menu.solution-dropdown {
    width: auto !important;
  }
  #navbar-header .solution-dropdown-wrapper-row {
    grid-template-columns: max-content max-content !important;
  }
  #navbar-header .solution-dropdown .menu-level-1 {
    width: auto;
  }
  /* Resources and About Us, too, are only as wide as their longest item, so
     every panel has the same density (item, then the same right-hand air) */
  /* Product the same way: rail at its content width, and the list column at
     the width of the widest sub-item across ALL six lists ("Bank Statement
     Reconciliation", ~16.5em), so the panel doesn't resize as groups change */
  #navbar-header .dropdown-menu.product-dropdown {
    width: auto !important;
  }
  #navbar-header .product-dropdown-wrapper-row {
    grid-template-columns: max-content max-content !important;
  }
  /* all six sub-item lists share one grid cell; only the active one is
     visible. The column is then as wide as the widest item in ANY list (and
     as tall as the longest list), so nothing overflows and the panel never
     resizes as the hovered group changes. Hidden lists take no clicks. */
  #navbar-header .product-dropdown-wrapper-row > .col-lg-4 {
    display: grid !important;
  }
  #navbar-header .product-dropdown-wrapper-row ul[class*='-products'] {
    display: block !important;
    grid-area: 1 / 1;
    visibility: hidden;
    margin: 0;
    padding-left: 0;
  }
  #navbar-header .product-dropdown-wrapper-row ul[class*='-products'].active {
    visibility: visible;
  }
  #navbar-header .product-dropdown-anchor {
    padding-right: 0.5rem !important;
    white-space: nowrap;
  }
  #navbar-header .product-dropdown-wrapper-row ul[class*='-products'] .product-title {
    white-space: nowrap;
  }
  #navbar-header .dropdown-menu.resources-dropdown,
  #navbar-header .dropdown-menu.about-us-dropdown {
    width: auto !important;
    min-width: 0 !important;
  }
  #navbar-header .resources-dropdown-wrapper > .row,
  #navbar-header .about-us-dropdown .row {
    display: block;
    margin: 0;
  }
  #navbar-header .resources-dropdown-wrapper > .row > [class*='col-'],
  #navbar-header .about-us-dropdown .row > [class*='col-'] {
    width: auto !important;
    max-width: none;
    flex: none;
    padding: 0 !important;
  }
  #navbar-header .resources-dropdown .learn-transform-list,
  #navbar-header .about-us-dropdown .learn-transform-list {
    padding-right: 0.5rem !important;
    white-space: nowrap;
  }
  /* everything inside a row takes the row's colour and weight */
  #navbar-header .dropdown-menu .learn-transform-list a,
  #navbar-header .product-dropdown-anchor .product-suite,
  #navbar-header .product-dropdown-anchor .product-suite span:not(.kh-nav-icon),
  #navbar-header .product-dropdown-wrapper-row ul[class*='-products'] .nav-li > a {
    color: inherit !important;
    font-weight: inherit !important;
    font-size: inherit !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
  }
  #navbar-header .dropdown-menu .learn-transform-list a,
  #navbar-header .product-dropdown-anchor .product-suite {
    display: flex !important;
    align-items: center;
    gap: 0.75rem;
  }
  #navbar-header .product-dropdown-anchor .product-suite span::before {
    content: none !important;
  }
  #navbar-header .product-dropdown-wrapper-row ul[class*='-products'] .nav-li > a {
    display: block;
  }
  #navbar-header .solution-dropdown .level-1-item {
    margin-bottom: 0;
  }
  #navbar-header .solution-dropdown .level-1-item,
  #navbar-header .solution-dropdown .level-1-item > a.linkitem {
    width: 100%;
  }
  #navbar-header .solution-dropdown .level-1-item > a.linkitem {
    padding-right: 0.5rem !important;
  }
  /* no panel has a column title (Product, Solutions, About Us never did) */
  #navbar-header .resources-dropdown .resource-col-title {
    display: none;
  }
  #navbar-header .solution-dropdown .menu-level-2 {
    display: grid;
    gap: 0.1rem;
  }
  /* hover — and the Product rail's .active (the group whose list is shown) */
  #navbar-header .dropdown-menu .learn-transform-list:hover,
  #navbar-header .product-dropdown-anchor:hover,
  #navbar-header .product-dropdown-anchor.active,
  #navbar-header .product-dropdown-wrapper-row ul[class*='-products'] .nav-li > a:hover .product-title,
  #navbar-header .solution-dropdown .level-1-item > a.linkitem:hover,
  #navbar-header .solution-dropdown .level-2-item > a.linkitem:hover,
  #navbar-header .dropdown-menu .kh-current,
  #navbar-header .product-dropdown-wrapper-row ul[class*='-products'] .product-title.kh-current {
    background: var(--kosh-surface) !important;
    color: var(--kosh-pink, #ff3972) !important;
    font-weight: 700 !important;
  }
}
/* The menu item of the page you are on (set by assets/js/nav.js). On phones
   the collapsed menu has no hover fill, so it is marked by colour and weight. */
@media (max-width: 991px) {
  #navbar-header .dropdown-menu .kh-current,
  #navbar-header .dropdown-menu .kh-current a {
    color: var(--kosh-pink, #ff3972) !important;
    font-weight: 700 !important;
  }
}

/* ---- product pages: customer quotes (lib/product-page.mjs testimonials) ----
   Same card language as the rest of the site: white card, soft border, 12px
   radius, a pink quote mark; three to a row on desktop, one on phones. */
.kh-product-quotes {
  padding: 4rem 0;
  background: #f7f8fa;
}
.kh-product-quotes h2 {
  margin-bottom: 2.5rem;
}
.kh-quote-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}
@media (max-width: 991px) {
  .kh-quote-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 575px) {
  .kh-quote-grid {
    grid-template-columns: 1fr;
  }
}
.kh-quote {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 1.75rem 1.5rem 1.5rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}
.kh-quote blockquote {
  position: relative;
  flex: 1;
  margin: 0 0 1.25rem;
  padding-top: 1.75rem;
  font-size: 0.97rem;
  line-height: 1.6;
  color: #3b3f47;
}
.kh-quote blockquote::before {
  content: '\201C';
  position: absolute;
  top: -0.6rem;
  left: 0;
  font-size: 3rem;
  line-height: 1;
  font-weight: 700;
  color: var(--kosh-pink);
}
.kh-quote figcaption strong {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--kosh-ink);
}
.kh-quote figcaption span {
  font-size: 0.875rem;
  color: #5b6270;
}

/* ===========================================================================
   Motion: the popups float in, the navbar menus drop in, FAQ answers slide
   open and shut. Keyframes give only a `from`, so each animates to whatever
   the element's own styles say (a backdrop to its 50% opacity, a menu to its
   placed position). `translate` is used rather than `transform`, which the
   menus and dialogs already set (some with !important) for their placement.
   Nothing moves for visitors who ask for reduced motion.
   =========================================================================== */
@keyframes kh-float-in {
  from {
    opacity: 0;
    translate: 0 32px;
    scale: 0.98;
  }
}
@keyframes kh-drop-in {
  from {
    opacity: 0;
    translate: 0 -10px;
  }
}
@keyframes kh-fade-in {
  from {
    opacity: 0;
  }
}

/* Popups: the dialog rises into place while the backdrop fades in. Bootstrap's
   own slide-down of the dialog is switched off so the two don't fight. */
.modal.fade .modal-dialog {
  transform: none;
  transition: none;
}
.modal.show .modal-dialog {
  animation: kh-float-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.kosh-backdrop,
.modal-backdrop.show {
  animation: kh-fade-in 0.4s ease both;
}

/* Navbar */
@media (min-width: 992px) {
  #navbar-header .navbar-nav .dropdown-menu.show {
    animation: kh-drop-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  /* switching groups in the Product menu: the new list eases in */
  #navbar-header .product-dropdown-wrapper-row ul[class*='-products'].active > li {
    animation: kh-drop-in 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  #navbar-header .product-dropdown-wrapper-row ul[class*='-products'].active > li:nth-child(n + 3) {
    animation-delay: 0.03s;
  }
  #navbar-header .product-dropdown-wrapper-row ul[class*='-products'].active > li:nth-child(n + 7) {
    animation-delay: 0.06s;
  }
  #navbar-header .product-dropdown-wrapper-row ul[class*='-products'].active > li:nth-child(n + 11) {
    animation-delay: 0.09s;
  }
}
/* the tabs' pill and hover colour glide rather than snap (menu links already
   transition their colour, above) */
#navbar-header .navbar-nav > li > .nav-link {
  transition:
    color 0.2s ease,
    background-color 0.25s ease,
    box-shadow 0.25s ease;
}
/* phones: the opened menu's contents fade in as the panel expands */
@media (max-width: 991.98px) {
  #navbar-header .navbar-collapse.show,
  #navbar-header .navbar-collapse.collapsing {
    animation: kh-fade-in 0.3s ease both;
  }
}

/* FAQ answers: a grid row grows from 0 to its content's height, so opening
   and closing both animate, at any answer length. The theme's display/
   max-height toggling is overridden; the answer stays in the page (hidden
   only visually), so search engines still read it. */
.accordion-section .acrdn-cntnt {
  display: grid !important;
  grid-template-rows: 0fr;
  max-height: none !important;
  opacity: 0;
  overflow: hidden;
  transition:
    grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.3s ease;
}
.accordion-section .acrdn-cntnt > * {
  min-height: 0;
  overflow: hidden;
}
.accordion-section.active .acrdn-cntnt {
  grid-template-rows: 1fr;
  opacity: 1;
  transition:
    grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.4s ease 0.08s;
}
.accordion-title .icon:before {
  transition: background 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
  .modal.show .modal-dialog,
  .kosh-backdrop,
  .modal-backdrop.show,
  #navbar-header .navbar-nav .dropdown-menu.show,
  #navbar-header .product-dropdown-wrapper-row ul[class*='-products'].active > li,
  #navbar-header .navbar-collapse.show,
  #navbar-header .navbar-collapse.collapsing {
    animation: none;
  }
  .accordion-section .acrdn-cntnt {
    transition: none;
  }
}

/* /demo-request: the CTA panel on the popup's peach card */
.kh-demo-panel {
  padding: 2rem 2.25rem;
  background: #ffe9de;
  border-radius: 20px;
}
@media (max-width: 767.98px) {
  .kh-demo-panel {
    margin-top: 2rem;
    padding: 1.5rem;
  }
}
/* the popup theme's `.bkp-demo-frm p` sets 10px !important for its consent line */
.request_a_demo.modal .bkp-demo-frm p.kh-cta-lede {
  font-size: 0.98rem !important;
  line-height: 1.55;
}

/* The theme dims the page behind an open menu with a fixed overlay
   (body/nav.dropdown-visible::before, in the captured page CSS). With menus
   opening on hover it must not catch the pointer: it covers the navbar too,
   and would close the menu the moment it appeared. It only dims; clicks pass
   through to the page, and an outside click still closes the menu. */
body.dropdown-visible::before,
nav.dropdown-visible::before {
  pointer-events: none;
}

/* ---- after a form is sent (assets/js/forms.js showDone) ---------------------
   The panel (the popup's form column, /demo-request's form box, or a contact
   card) keeps its height and shows only the message: everything else in it,
   the heading included, is hidden. The message is centred both ways, the
   text large, and a green tick draws itself below it. */
.kosh-submitted {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
}
.kosh-submitted > :not(.kosh-done):not(:has(.kosh-done)) {
  display: none !important;
}
.kosh-submitted > :has(.kosh-done) {
  display: flex;
  justify-content: center;
  width: 100%;
}
.kosh-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 32px 16px;
  text-align: center;
  animation: kh-fade-in 0.35s ease both;
}
.kosh-done-text {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 600;
  line-height: 1.3;
  color: #1e1e1e;
}
.kosh-done-tick {
  width: 92px;
  height: 92px;
  animation: kh-tick-pop 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) 0.1s both;
}
.kosh-done-tick circle {
  fill: #e9f9f0;
  stroke: #1fb86f;
  stroke-width: 3;
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  transform: rotate(-90deg);
  transform-origin: center;
  animation: kh-tick-draw 0.6s ease-out 0.2s forwards;
}
.kosh-done-tick path {
  fill: none;
  stroke: #1fb86f;
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 32;
  stroke-dashoffset: 32;
  animation: kh-tick-draw 0.35s ease-out 0.75s forwards;
}
@keyframes kh-tick-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes kh-tick-pop {
  from {
    opacity: 0;
    scale: 0.6;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .kosh-done,
  .kosh-done-tick,
  .kosh-done-tick circle,
  .kosh-done-tick path {
    animation: none;
    stroke-dashoffset: 0;
  }
}