/* The template shipped BwGradual DEMO here. Demo-licensed, cannot ship in a
   commercial product; the files are removed and the heading face now comes
   from the Next layout (Plus Jakarta Sans via --font-display, see main.css
   --font-heading). This file stays as the record of why. */

/* Sastik page scoped overrides.
   The host StaffIntra app ships a global reset (globals.css: `img{display:block}`)
   that is NOT present in the original Sastik template, where images use the
   browser default (inline). That reset breaks inline image flows on this page
   (hero breadcrumb flags, inline star/rating icons, etc.). Restore the original
   inline behaviour, scoped to the Sastik body class so the rest of the app is
   unaffected. Sastik's own more-specific rules still win where they set display. */
.automation-saas img {
  display: inline;
}

/* Heading face: Bricolage Grotesque, already loaded by the Next layout as
   --font-bricolage. Declared on body, not :root, because next/font defines
   its variables on body and a :root-level var() reference would compute to
   guaranteed-invalid (which is how headings once fell through to Inter). */
body.automation-saas {
  --font-heading: var(--font-bricolage), sans-serif;
}

/* The brand-mark chips standing in for the hero's flag row and the
   integration orbit's vendor logos: keep them at chip scale. */
.automation-saas .xb-item--breadcrumd img {
  width: 22px;
  height: auto;
  margin: 0 3px;
}

/* The host app's Tailwind ships a `.collapse` utility (visibility: collapse)
   that collides with Bootstrap's `.collapse` state class on the template's
   nav, leaving the menu laid out but invisible. Restore visibility inside
   the Sastik page; Bootstrap's own hide mechanism is display, not
   visibility, so its behavior is unaffected. */
.automation-saas .collapse {
  visibility: visible;
}

/* The StaffIntra lockup PNG is 954x160; the template sized its logo slot to
   its own small SVG's intrinsic size, so without a cap the header logo
   renders at nearly full viewport width. Cap every logo slot. */
.automation-saas .xb-header-logo .logo img,
.automation-saas .xb-logo-mobile img {
  height: 32px;
  width: auto;
}

/* The brand voice is sentence case; the template Title-Cases headings and
   even body copy ("Puts People, Time..."), which reads wrong on our copy.
   Render text exactly as authored. */
.automation-saas .sec-title .title,
.automation-saas .xb-item--content,
.automation-saas .xb-item--breadcrumd,
.automation-saas .sub-title,
.automation-saas .xb-footer_bottom,
.automation-saas h1,
.automation-saas h2,
.automation-saas h3 {
  text-transform: none;
}

/* ── chevrons that used to be Font Awesome glyphs ──────────────────────
   main.css draws seven carets with `content: "\f107"` and friends against
   "Font Awesome 6 Pro". The icon font is gone (668 kB of CSS and a 1 MB TTF
   for what turned out to be one arrow in the markup and these seven
   pseudo-elements), so each one is redrawn here as a masked SVG.

   A mask rather than a background image: the fill is `currentColor`, so the
   chevron still takes its colour from whatever encloses it, exactly as the
   glyph did. Every original rule keeps its own position and transform; all
   that changes is what gets painted. */
:root {
  --si-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m3.5 6 4.5 4.5L12.5 6'/%3E%3C/svg%3E");
  --si-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' d='M3.5 8h9'/%3E%3C/svg%3E");
}

.main-menu ul li.menu-item-has-children > a span::after,
.main-menu ul li .submenu li.menu-item-has-children > a span::after,
.xb-faq .accordion_box .block .acc-btn .arrow::before,
.xb-faq .accordion_box .block.active-block .acc-btn .arrow::before,
.fs-faq .accordion_box .block.active-block .acc-btn .arrow::before,
.xb-menu-toggle:before,
.xb-menu-toggle.active:before {
  content: '';
  display: block;
  background-color: currentColor;
  -webkit-mask: var(--si-chevron) center / contain no-repeat;
  mask: var(--si-chevron) center / contain no-repeat;
}

/* The mobile submenu caret is a real <button> (MenuInteractions.jsx), so it
   arrives carrying the UA's button chrome: a grey face, a border, padding and
   the system font. Stripped back to the bare box main.css already positions.
   The focus ring is stated because main.css carries a sitewide
   `*:focus { outline: none }` that would otherwise leave the one control on
   this menu that a keyboard can reach with nothing to show for it. */
button.xb-menu-toggle {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
}
button.xb-menu-toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 4px;
}

/* top-level nav caret */
.main-menu ul li.menu-item-has-children > a span::after {
  width: 9px;
  height: 9px;
  margin-top: -1px;
}
/* submenu caret: the original rotates -90deg so it points into the panel */
.main-menu ul li .submenu li.menu-item-has-children > a span::after {
  width: 11px;
  height: 11px;
  top: 7px;
}
/* FAQ accordion */
.xb-faq .accordion_box .block .acc-btn .arrow::before {
  width: 14px;
  height: 14px;
  top: 9px;
}
.xb-faq .accordion_box .block.active-block .acc-btn .arrow::before { top: 7px; }
/* the "minus" state on the alternate FAQ */
.fs-faq .accordion_box .block.active-block .acc-btn .arrow::before {
  -webkit-mask-image: var(--si-minus);
  mask-image: var(--si-minus);
}
/* mobile submenu caret, and its open state */
.xb-menu-toggle:before {
  width: 12px;
  height: 12px;
  transition: transform 0.25s ease;
}
.xb-menu-toggle.active:before { transform: rotate(180deg); }

/* The toggle is a 28px square that used to centre its glyph with
   `line-height: 28px; text-align: center`. A masked box is not text, so it
   ignored both and sat in the corner. Centre it as a box instead. */
.xb-menu-toggle { display: grid; place-items: center; line-height: 0; }

/* ── mega menu promo art ───────────────────────────────────────────────
   Was three 1536x2048 PNGs (46 kB each) of a flat purple gradient with
   diagonal hairlines, rendered into a 372x570 box. That is 139 kB and three
   requests to draw something CSS draws exactly: two horizontal bands, a set
   of 45deg hairlines at 96px spacing, and a sparse dot grid. Each menu passes
   its own mid-band tint as --promo-tone, which is the only way the three
   originals differed (#2a0f69, #2e136f, #27105f). */
.si-mega-promo__art {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 260px;
  --promo-top: #281262;
  --promo-foot: #120730;
  background-color: var(--promo-tone, #2a0f69);
  background-image:
    /* sparse dot grid */
    radial-gradient(circle at 50% 50%, rgba(178, 152, 255, 0.62) 0 1.2px, transparent 1.7px),
    /* 45deg hairlines, 96px apart as measured off the original */
    repeating-linear-gradient(45deg,
      rgba(139, 106, 255, 0.26) 0 1px, transparent 1px 96px),
    /* the top and bottom bands, at the 420/1527 of 2048 the original used */
    linear-gradient(180deg,
      var(--promo-top) 0 20.5%,
      transparent 20.5% 74.6%,
      var(--promo-foot) 74.6% 100%);
  background-size: 104px 104px, auto, auto;
  transition: transform 0.5s var(--si-ease, cubic-bezier(0.4, 0, 0.2, 1));
}
.si-mega-promo:hover .si-mega-promo__art { transform: scale(1.04); }

@media (max-width: 991px) {
  .si-mega-promo__art { min-height: 180px; }
}

/* ── header stacking ───────────────────────────────────────────────────
   The fixed header resolved to z-index 3. The "how it works" cards are a
   sticky stack that assigns z-index 1, 2 and 3 so each card overlaps the one
   before it, so the THIRD card tied the header exactly. A tie is broken by
   DOM order, and the card comes later, so card three alone slid over the
   navigation while cards one and two passed correctly beneath it.

   Raising the header rather than lowering the stack: the stack's 1/2/3 is
   meaningful to its own effect, and a fixed navigation should outrank page
   content unconditionally rather than by one point. */
#xb-header-area { z-index: 50; }

/* ── one width for the whole site ──────────────────────────────────────
   The pricing page is the design reference and runs on max-width 1856px with
   padding: 0 clamp(24px, 2.7vw, 52px). Everything else ran narrower: the
   template's .container capped at 1390px and .mxw-1339 capped its section
   wrapper at 1339px. At a 1600px viewport that is 1340px of content against
   pricing's 1513px, and the gap widens from there because pricing keeps
   growing to 1856 while the rest stopped.

   This was scoped to .si-wide on the home page only. It is now global, so
   every route shares one measure: the header, the footer, the mega menu, the
   lead forms and all twelve PageShell routes. .si-wide is left in the markup
   as a harmless no-op rather than chased out of every file. */
.automation-saas .container,
.container,
.mxw-1339 {
  max-width: var(--si-measure, 1120px);
}
/* main.css sets .automation-saas .container to 1390px, which is (0,2,0) and
   beat a bare .container even from a later file. Matched here rather than
   fought with !important. */
.automation-saas .container {
  padding-left: clamp(24px, 2.7vw, 52px);
  padding-right: clamp(24px, 2.7vw, 52px);
}

/* ── footer, fully boxed ───────────────────────────────────────────────
   main.css floats the footer as a rounded card: margin 0 30px and a 20px
   radius, with a ::before that inherits the radius to paint the black fill.
   Squared off and taken edge to edge, so the footer reads as the page's
   base rather than another card sitting on it. */
.as-footer-wrapper,
.as-footer-wrapper::before {
  border-radius: 0 !important;
}
.as-footer-wrapper {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* The copyright strip is its own rounded pill inside the footer. With the
   footer squared it was the only curved thing left down there. */
.as-footer-wrapper .copyright-wrap,
.as-footer-wrapper [class*="footer-bottom"],
.as-footer-wrapper .as-footer-copyright { border-radius: 0 !important; }

/* The fill is inset 2px and sized in percentages, which left hairline gaps
   once the corners squared. Pinned to the box instead. */
.as-footer-wrapper::before {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* ── full bleed section grounds ────────────────────────────────────────
   The FAQ's gradient sat on .as-faq-wrapper, which lives inside the page
   container, so at a 1600px viewport it painted 1534px and left white down
   both sides. The ground moves to the section itself and the wrapper goes
   transparent, so the band reaches the edges the way the design intends.

   The footer had the same shape of problem from the other direction: only
   .as-footer-wrapper::before painted black, and footer.footer carries a
   pb-40, so a white strip sat under the black. The section now carries the
   fill itself. */
.faq-section {
  background: linear-gradient(359deg, #f5effd 0%, #fffefe 100%);
}
.as-faq-wrapper {
  background: none !important;
  border-radius: 0 !important;
}

footer.footer {
  background: var(--color-black, #000);
}
/* The copyright strip is inset and tinted; with the footer squared it read as
   a floating pill rather than part of the base. */
.as-footer-wrapper .xb-footer_bottom {
  border-radius: 0 !important;
  background: transparent !important;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

/* NOTE ON LOAD ORDER: this file is linked BEFORE si-design-overlay.css, so
   an override here loses to that file at equal specificity even with
   !important. Anything that needs to beat si-design-overlay has to be edited
   there, or written at higher specificity here. The pricing deck colour was
   fixed at source for exactly this reason. */

/* ── grounds that main.js used to paint ────────────────────────────────
   The template shipped a data-bg-color attribute and main.js walked the DOM
   applying it as a background. That script is deleted, so the attribute is
   inert markup and the pricing band lost its ground: the .pg overlays,
   which are light and designed to sit ON a dark ground, ended up over
   white, the band read as muddy grey, and the white heading with it went
   invisible. Three elements carried the attribute. Hero is painted by the
   inline style in app/page.tsx and the footer is handled above, so only the
   pricing band was actually broken, but all three are pinned here now so
   nothing depends on a script that no longer exists.

   THE PRICING BAND IS BLACK. It ran #1b0042, the violet band ground, until
   the plans were rebuilt as three separate containers; black is what lets
   three dark containers read as three objects rather than as panels cut out
   of a violet field. Its rule keys off the id alone, because Pricing.jsx no
   longer carries a data-bg-color: an attribute nothing reads, naming a
   colour the page does not paint, is worse than no attribute at all. The
   two that remain below are matched by their own markup and are the last of
   them. */
.hero-area[data-bg-color="#09070c"] { background-color: #09070c; }
#pricing.pricing { background-color: var(--color-black, #000); }
footer.footer[data-bg-color="#000"] { background-color: #000; }

/* FAQ items acknowledge the cursor; the template gave them nothing. */
.faq-section .accordion.block { transition: background 0.2s ease; }
.faq-section .accordion.block:hover { background: rgba(255, 255, 255, 0.8); }


/* ── FAQ accordion slide ───────────────────────────────────────────────
   main.css hides answers with display none and shows .current with display
   block, which jQuery used to slideToggle between. Display cannot animate,
   so the body is a grid whose row animates 0fr to 1fr instead: the same
   slide, no script. This file loads after main.css, so the equal-specificity
   override holds. */
.xb-faq .accordion_box .block .acc_body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.xb-faq .accordion_box .block .acc_body.current {
  display: grid;
  grid-template-rows: 1fr;
}
.xb-faq .accordion_box .block .acc_body .content {
  overflow: hidden;
  min-height: 0;
  /* main.css puts 12px/24px vertical padding on .content itself, and a padded
     box cannot shrink below its padding, so collapsed items still showed a
     24px sliver. The vertical rhythm lives on the paragraph instead, which
     the 0fr row clips along with everything else. */
  padding-top: 0;
  padding-bottom: 0;
}
.xb-faq .accordion_box .block .acc_body .content > p {
  padding: 12px 0 24px;
  margin: 0;
}
.xb-faq .accordion_box .block .acc-btn { cursor: pointer; }
.xb-faq .accordion_box .block .acc-btn:focus-visible {
  outline: 2px solid var(--si-accent, #6f14f2);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .xb-faq .accordion_box .block .acc_body { transition: none; }
}