/* ══════════════════════════════════════════════════════════════════════
   Shared stylesheet for <as-footer> and <as-cta>, plus the document
   scroll lock <as-navbar> toggles.

   Replaces the runtime-injected <style data-as-components> block that
   as-footer.js and as-cta.js each used to append. Both components now
   link this one file, so it can never be injected twice and can never
   depend on which component upgraded first.

   url() resolves against THIS file, which is why the {{FONTS_BASE}} and
   {{ASSETS_BASE}} placeholders are gone.
   ══════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   Academyship — CTA + Footer shared styles
   Used by: components/cta.html, components/footer.html
   Font files live at ../Fonts/ relative to this file.
   ════════════════════════════════════════════════════════════ */

/* ── Brand fonts ─────────────────────────────── */
@font-face {
  font-family: 'Welfare';
  src: url('../../Fonts/welfare.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Boldonse';
  src: url('../../Fonts/Boldonse-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Salmond';
  src: url('../../Fonts/AnekBangla.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NibPro';
  src: url('../../Fonts/fonts/NibPro-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NibPro';
  src: url('../../Fonts/fonts/NibPro-SemiBold.woff2') format('woff2');
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Agency';
  src: url('../../Fonts/Agency.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Megumi';
  src: url('../../Fonts/Megumi.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../../Fonts/AnekBangla.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('../../Fonts/AnekBangla.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* ── Footer-private aliases of the same faces ─────────────────────────
   The names above are shared vocabulary: several pages declare their own
   @font-face for 'Salmond', 'Boldonse' or 'Welfare' pointing at
   different files, and the last declaration for a family wins. On
   pricing-plan.html that meant the footer's Salmond resolved to the page's
   bold cut, ~7% wider, which pushed the brand paragraph onto a fifth line
   and made the footer 30px taller than everywhere else. These aliases
   cannot be redefined by a page, so the footer always gets these files. */
@font-face {
  font-family: 'AsWelfare';
  src: url('../../Fonts/welfare.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'AsBoldonse';
  src: url('../../Fonts/Boldonse-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'AsSalmond';
  src: url('../../Fonts/AnekBangla.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'AsAgency';
  src: url('../../Fonts/Agency.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'AsMegumi';
  src: url('../../Fonts/Megumi.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'AsInter';
  src: url('../../Fonts/AnekBangla.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* Scoped to the footer on purpose: .font-* is shared vocabulary, and a
   page that uses .font-salmond in its own markup should keep resolving
   the face that page declared. */
.as-footer-shell .font-welfare  { font-family: 'AsWelfare', 'AsInter', system-ui, sans-serif !important; }
.as-footer-shell .font-boldonse { font-family: 'AsBoldonse', 'AsInter', system-ui, sans-serif !important; }
.as-footer-shell .font-salmond  { font-family: 'AsSalmond', 'AsInter', system-ui, sans-serif !important; }
.as-footer-shell .font-agency   { font-family: 'AsAgency', 'AsInter', system-ui, sans-serif !important; }

/* font-family is !important for the same reason letter-spacing already is:
   company/about.html carries a page rule that forces its body face onto
   every `p` and `input` with !important, which swapped the footer's
   Salmond for NibPro and reflowed the brand paragraph onto a fifth line. */
.font-welfare  {
  font-family: 'Welfare', 'Inter', system-ui, sans-serif !important;
  letter-spacing: 0.018em !important;
}
.font-boldonse {
  font-family: 'Boldonse', 'AnekBangla', system-ui, sans-serif !important;
  letter-spacing: normal !important;
}
.font-salmond  {
  font-family: 'Salmond', 'Inter', system-ui, sans-serif !important;
  letter-spacing: 0.012em !important;
}
.font-agency   {
  font-family: 'Agency', 'Inter', system-ui, sans-serif !important;
  letter-spacing: normal !important;
}

/* ── Footer surface colour ───────────────────────────────────
   Deliberately NOT a Tailwind arbitrary class. Tailwind is precompiled into
   each page's stylesheet, so an arbitrary value like bg-[#210361] that was
   never present at build time generates no rule at all and the footer ends
   up transparent. Declaring it here — in the CSS the component injects
   itself — means the surface is guaranteed opaque on every page, including
   the homepage where the CTA's star background runs underneath it. */
.as-footer-shell {
  background-color: #210361;
}
/* The top value-prop ribbon is a grid whose 1px gaps show through as divider
   lines, so each cell must carry the surface colour rather than be see-through. */
.as-footer-shell .footer-ribbon-cell {
  background-color: #210361;
}

/* ── Ribbon separation, applied evenly ───────────────────────
   The three decorative blur blobs are pinned to the corners of the shell, so
   the top-left one washed colour into the area under the FIRST ribbon cell
   while the last cell had nothing under it — the ribbon looked lit from one
   end. The ribbon now carries its own opaque surface, so all four cells read
   identically, and the soft separation is redrawn deliberately across the
   full width beneath them instead of being a side effect of a corner blob. */
.as-footer-shell .footer-ribbon {
  background-color: #210361;
}
.as-footer-shell .footer-body {
  /* Fades to the same hue at zero alpha rather than to the transparent
     keyword, so the falloff can't pick up a grey cast in browsers that
     interpolate gradient stops without premultiplied alpha. */
  background-image: linear-gradient(
    180deg,
    rgba(84, 40, 180, 0.55) 0,
    rgba(84, 40, 180, 0) 200px
  );
  background-repeat: no-repeat;
}

/* Soft off-white instead of pure #fff: pure white on the deep-indigo footer
   causes halation (text appears to vibrate/float). #e6e6e6 keeps it crisp and
   readable without the bloom. Muted text (text-white/60 etc.) is already fine. */
.as-footer-shell .text-white {
  color: #e6e6e6 !important;
}

/* Tracking helpers */
.cta-kicker-label   { letter-spacing: 0.26em !important; }
.cta-micro-label    { letter-spacing: 0.26em !important; }
.cta-pill-label     { letter-spacing: 0.34em !important; }
.cta-slider-label   { letter-spacing: 0.20em !important; }
.footer-visible-label { letter-spacing: 0.24em !important; }
.footer-visible-copy  { letter-spacing: 0.05em !important; margin-top: 6px !important; }
.footer-visible-brand { letter-spacing: 0.06em !important; }

.as-footer-shell .footer-nav-shift,
.as-footer-shell .footer-nav-shift h4,
.as-footer-shell .footer-nav-shift ul,
.as-footer-shell .footer-nav-shift a {
  font-family: 'AsMegumi', 'AsInter', system-ui, sans-serif !important;
}
.as-footer-shell .footer-nav-shift > ul {
  margin-top: clamp(28.8px, 2.4vw, 38.4px) !important;
}
.as-footer-shell .footer-nav-shift > ul > li {
  font-weight: 600;
}
.as-footer-shell .footer-nav-shift > h4 {
  font-size: clamp(15.2px, 1.05vw, 19.52px) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  -webkit-text-stroke: 0.2px currentColor;
}
.as-footer-shell .footer-bottom-bar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
}
.as-footer-shell .footer-bottom-bar,
.as-footer-shell .footer-copyright,
.as-footer-shell .footer-copyright-line,
.as-footer-shell .footer-legal-links,
.as-footer-shell .footer-legal-links a {
  font-family: 'AsMegumi', 'AsInter', system-ui, sans-serif !important;
}
.as-footer-shell .footer-legal-links {
  justify-content: center;
  gap: 16px 24px !important;
}
.as-footer-shell .footer-legal-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7.2px 12.8px;
}
.as-footer-shell .footer-legal-group > strong {
  color: #8ec5ee;
  font-size: 10.88px;
  font-weight: 800;
  letter-spacing: .13em;
  line-height: 1;
  text-transform: uppercase;
}
.as-footer-shell .footer-social-links {
  justify-content: flex-end;
}
.as-footer-shell .footer-copyright {
  display: block !important;
  justify-self: start;
  min-width: max-content;
  line-height: 1.45 !important;
}
.as-footer-shell .footer-copyright-line {
  color: rgba(255, 255, 255, 0.3) !important;
  font-size: 10px !important;
  margin-top: clamp(12px, 1.4vw, 20px) !important;
}
/* Trailing space under the copyright line was much larger than the space
   above the footer content (inherited from the symmetric py-12/14/16
   utility), leaving a visibly empty band at the very bottom of the shell.
   Trim only the bottom padding so content sits lower/denser in the box. */
.as-footer-shell .footer-body {
  padding-bottom: clamp(24px, 2.2vw, 32px) !important;
}
@media (max-width: 1023px) {
  .as-footer-shell .footer-bottom-bar {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .as-footer-shell .footer-copyright,
  .as-footer-shell .footer-legal-links,
  .as-footer-shell .footer-social-links {
    justify-content: center;
  }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .as-footer-shell .footer-main-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 40px !important;
  }
  .as-footer-shell .footer-main-grid > div:first-child {
    grid-column: 1 / -1 !important;
    max-width: 100% !important;
  }
  .as-footer-shell .footer-nav-shift {
    transform: none !important;
    min-width: 0 !important;
  }
}

@media (min-width: 1024px) {
  .footer-nav-shift { transform: translateX(clamp(24px, 2.5vw, 52px)); }
}

/* Smooth chip hover */
.chip-hover { text-decoration: none !important; transition: transform .35s ease, background-color .35s ease, color .35s ease; }
.chip-hover:hover { transform: translateY(-2px); }

/* CTA: remove underlines from every link/button/tag inside the CTA */
.cta-section a,
.cta-section a:link,
.cta-section a:visited,
.cta-section a:hover,
.cta-section a:active,
.cta-section button,
.cta-section button:hover,
.cta-section a *,
.cta-section button *,
.cta-section .chip-hover,
.cta-section .hover-pill-btn,
.cta-section .city-pill,
.cta-section .cta-slider-label,
.cta-section .cta-pill-label {
  text-decoration: none !important;
  text-decoration-line: none !important;
}
.cta-section a::before,
.cta-section a::after,
.cta-section button::before,
.cta-section button::after {
  text-decoration: none !important;
}

/* CTA heading span (e.g. "One Connected System") uses Welfare */
.cta-title span { font-family: 'Welfare', 'Inter', system-ui, sans-serif !important; }

/* CTA action pills — compact so all three sit on one line */
.cta-actions-row {
  flex-wrap: nowrap !important;
  gap: 8px !important;
}
.cta-actions-row .hover-pill-btn {
  height: 50px !important;
  min-height: 50px !important;
  padding-left: 26px !important;
  padding-right: 5px !important;
  flex: 0 0 auto !important;
}
.cta-actions-row .pill-fill {
  width: 40px !important;
  height: 40px !important;
}
.cta-actions-row .hover-pill-btn > span:last-child {
  width: 40px !important;
  height: 40px !important;
}
.cta-actions-row .cta-pill-label {
  font-size: 13px !important;
  letter-spacing: 0.14em !important;
  line-height: 1 !important;
  padding-right: 22px !important;
  white-space: nowrap !important;
}
@media (max-width: 1023px) {
  .cta-actions-row { flex-wrap: wrap !important; }
}
@media (max-width: 640px) {
  .cta-actions-row {
    width: 100% !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 10px !important;
  }
  .cta-actions-row .hover-pill-btn {
    width: min(100%, 300px) !important;
    height: 44px !important;
    min-height: 44px !important;
    padding-left: 18px !important;
    padding-right: 5px !important;
    justify-content: space-between !important;
  }
  .cta-actions-row .pill-fill {
    display: none !important;
  }
  .cta-actions-row .hover-pill-btn > span:last-child {
    width: 34px !important;
    height: 34px !important;
  }
  .cta-actions-row .cta-pill-label {
    min-width: 0 !important;
    padding-right: 8px !important;
    font-size: 10px !important;
    letter-spacing: 0.12em !important;
  }
}

/* Footer link hover underline */
.fx-link { position: relative; display: inline-block; }
.fx-link.inline-flex { display: inline-flex; align-items: center; }
.fx-link::after {
  content: ''; position: absolute; left: 0; bottom: -3px;
  height: 1px; width: 0; background: currentColor; transition: width .35s ease;
}
.fx-link:hover::after { width: 100%; }

/* ── Footer scoped base ───────────────────────────────────────────────
   The footer is the same markup on every page, but each page ships its
   own base layer (Tailwind preflight on the built pages, a vendor theme
   on company/about.html, hand-written CSS on contact-sales.html). The
   footer used to inherit whatever that page happened to set, so its
   height, font and box model drifted page to page — Times New Roman and
   content-box on contact-sales, Urbanist on about, line-height:normal on
   school. This block gives the footer its own base so it renders the
   same everywhere; index.html is the reference.

   Specificity is deliberate. :where() zeroes the .as-footer-shell part,
   so each rule lands at the specificity of a bare element selector: it
   overrides a page's `p { margin: … }` (this file always loads last) but
   still loses to the footer's own .mt-6 / .leading-7 utility classes. */
.as-footer-shell,
.as-footer-shell *,
.as-footer-shell *::before,
.as-footer-shell *::after {
  box-sizing: border-box;
}
/* Tailwind's preflight convention, restated at zero specificity so the
   footer's own border utilities and the rules further down still win. */
:where(.as-footer-shell),
:where(.as-footer-shell) *,
:where(.as-footer-shell) *::before,
:where(.as-footer-shell) *::after {
  border-width: 0;
  border-style: solid;
  border-color: currentColor;
}
.as-footer-shell {
  font-family: 'AsInter', system-ui, sans-serif !important;
  line-height: 1.5;
  font-size: 16px;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
/* Inheritance, not defaults: a page theme's bare `li { font-size … }` or
   `p { color … }` outranks the value the footer's own utility class sets
   on the parent, which is how the link columns ended up 16px grey on
   about.html. Forcing inherit hands control back to the utility. */
:where(.as-footer-shell) :is(div, p, span, a, nav, ul, ol, li, address, form,
  label, h1, h2, h3, h4, h5, h6, strong, em, small, figure, blockquote) {
  font-family: inherit !important;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: none;
}
:where(.as-footer-shell) :is(p, h1, h2, h3, h4, h5, h6, ul, ol, li, address,
  figure, blockquote, form, fieldset, dl, dd) {
  margin: 0;
  padding: 0;
}
:where(.as-footer-shell) address {
  font-style: normal;
}
/* The link columns need a stronger version of the same idea: about.html's
   theme styles them through `ul li`, which outranks a single-element
   reset. Safe to raise here because no <li> in the footer template
   carries a class of its own, so nothing of the component's is lost —
   the value still comes from the utility on the parent <ul>. */
.as-footer-shell li {
  font-family: inherit !important;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  letter-spacing: inherit;
}
:where(.as-footer-shell) :is(input, button, select, textarea) {
  font-family: inherit !important;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
  border: 0 solid transparent;
  background: transparent;
  border-radius: 0;
  max-width: none;
  height: auto;
}
:where(.as-footer-shell) button {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  text-align: inherit;
}
:where(.as-footer-shell) svg {
  display: block;
  vertical-align: middle;
  font-family: inherit;
  /* school.html sizes bare <svg> at 16px, which shrank the ribbon icons.
     Loses to the h-*/w-* utilities the icons actually carry. */
  width: auto;
  height: auto;
}
:where(.as-footer-shell) :is(img, svg) {
  max-width: 100%;
}

/* ── Footer interference locks ────────────────────────────────────────
   Two things the scoped base above cannot reach, because they outrank a
   bare element selector.

   1. company/about.html loads Bootstrap 5, whose spacing utilities share
      names with Tailwind's but carry !important and different values
      (.px-5 is 3rem there, 1.25rem here). Re-declaring the few the
      footer uses restores the Tailwind values; on every other page these
      are a no-op because they already compute to the same thing.
   2. That page's theme also ships `input, button { width: 100% }` and
      `input[type="email"] { height: auto }`, which stretched the
      newsletter submit pill across the whole form and collapsed the
      field. These beat a plain utility class, so pin them here. */
.as-footer-shell .mt-1 { margin-top: 4px !important; }
.as-footer-shell .mt-2 { margin-top: 8px !important; }
.as-footer-shell .mt-3 { margin-top: 12px !important; }
.as-footer-shell .mt-4,
.as-footer-shell.mt-4 { margin-top: 16px !important; }
.as-footer-shell .gap-2 { gap: 8px !important; }
.as-footer-shell .gap-3 { gap: 12px !important; }
.as-footer-shell .p-1 { padding: 4px !important; }
.as-footer-shell .px-4 { padding-left: 16px !important; padding-right: 16px !important; }
.as-footer-shell .py-4 { padding-top: 16px !important; padding-bottom: 16px !important; }
.as-footer-shell .px-5 { padding-left: 20px !important; padding-right: 20px !important; }
.as-footer-shell .text-center { text-align: center !important; }

.as-footer-shell input,
.as-footer-shell button,
.as-footer-shell select,
.as-footer-shell textarea {
  width: auto;
}
/* Icon sizes stated rather than left to the h-*/w-* utilities: the school
   bundle emits a duplicate .h-4/.w-4 block after its sm: variants, so the
   ribbon icons stayed at the mobile size on desktop there. */
.as-footer-shell .footer-ribbon-cell svg {
  width: 16px;
  height: 16px;
}
@media (min-width: 640px) {
  .as-footer-shell .footer-ribbon-cell svg {
    width: 20px;
    height: 20px;
  }
}
/* The live-status dot: h-2 w-2 in the template, but the class is absent
   from some page bundles, which left it at double size. */
.as-footer-shell .footer-status-dot,
.as-footer-shell .footer-status-dot > span {
  width: 8px;
  height: 8px;
  flex: none;
}

/* Decoration the template asks for that some page bundles never compiled,
   because Tailwind purges what its content scan did not see and the footer
   markup lives in as-footer.js. The brand tile lost its gradient on two
   pages and the hairline ring lost its shadow on one. */
.as-footer-shell .footer-brand-mark {
  background-image: linear-gradient(to bottom right, #d8f25d, #8ec5ee);
  /* !important because Bootstrap's own .shadow-lg (about.html) is. */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1) !important;
}
.as-footer-shell .ring-1 {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* The two section dividers the markup asks for with border-b / border-t.
   Stated here rather than left to each page's border utilities, which
   resolved to 1px on three pages and 0 on the other two. */
.as-footer-shell .footer-ribbon {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.as-footer-shell .footer-bottom-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.as-footer-shell .newsletter-email {
  height: 48px;
  font-size: 15px;
  line-height: 1.5;
}

/* Footer local resets so browser defaults never leak through */
.as-footer-shell ul,
.as-footer-shell ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.as-footer-shell li {
  margin: 0;
  padding: 0;
}
.as-footer-shell .fx-link,
.as-footer-shell .fx-link:link,
.as-footer-shell .fx-link:visited,
.as-footer-shell .fx-link:hover,
.as-footer-shell .fx-link:active {
  color: inherit;
  text-decoration: none;
}
.as-footer-shell input[type="email"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  min-width: 0;
}
.as-footer-shell .as-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.as-footer-shell :is(a, button, input, select, textarea):focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 5px #2563eb !important;
}
.as-footer-shell .newsletter-form-shell {
  position: relative;
}
.as-footer-shell .newsletter-form-shell[data-state="validation-error"] .newsletter-form {
  box-shadow: 0 0 0 2px #fda4af, 0 0 0 5px rgba(244,114,182,.26);
}
.as-footer-shell .newsletter-form-shell[data-state="server-error"] .newsletter-form,
.as-footer-shell .newsletter-form-shell[data-state="not-configured"] .newsletter-form {
  box-shadow: 0 0 0 2px #fbbf24, 0 0 0 5px rgba(251,191,36,.2);
}
.as-footer-shell .newsletter-form-shell[data-state="success"] .newsletter-form {
  box-shadow: 0 0 0 2px #86efac, 0 0 0 5px rgba(134,239,172,.18);
}
.as-footer-shell .newsletter-status {
  min-height: 19.2px;
}
.as-footer-shell .newsletter-status[data-state="validation-error"],
.as-footer-shell .newsletter-status[data-state="server-error"] {
  color: #fecdd3 !important;
}
.as-footer-shell .newsletter-status[data-state="not-configured"] {
  color: #fde68a !important;
}
.as-footer-shell .newsletter-status[data-state="success"] {
  color: #bbf7d0 !important;
}
.as-footer-shell .newsletter-status a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.as-footer-shell .newsletter-submit[disabled] {
  cursor: progress;
  opacity: .72;
}

/* Decorative floating dots */
@keyframes floatDot {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.float-dot { animation: floatDot 6s ease-in-out infinite; }

/* CTA multi-color sheen */
.cta-sheen {
  background:
    radial-gradient(1200px 420px at -10% 110%, rgba(216,242,93,0.35), transparent 55%),
    radial-gradient(900px 380px at 110% -10%, rgba(244,114,182,0.32), transparent 55%),
    radial-gradient(700px 340px at 60% 120%, rgba(139,92,246,0.25), transparent 55%);
}

/* Marquee (reserved) */
.marquee-track { animation: marquee 38s linear infinite; }
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Vertical auto-slider (CTA right panel) */
@keyframes vslide {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}
.vslide-track { animation: vslide 55s linear infinite; will-change: transform; }
.vslide-mask {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
.vslide-track:hover { animation-play-state: paused; }

/* CTA card — uses --cta-bg CSS variable so the image is set per instance.
   Set via: element.style.setProperty('--cta-bg', "url('../../assets/sc1.png')")
   Default fallback points at ../assets/sc1.png relative to this CSS file. */
.cta-section {
  background-image:
    linear-gradient(90deg, rgba(26,35,64,0.58) 0%, rgba(26,35,64,0.45) 34%, rgba(26,35,64,0.24) 62%, rgba(26,35,64,0.33) 100%),
    var(--cta-bg, url('../../assets/sc1.png'));
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: clamp(340px, 34vw, 460px);
}

.cta-content-grid { min-height: clamp(340px, 34vw, 460px); }

/* Below 1024px the slider rail is not rendered at all. */
.cta-right-decor { display: none; }

/* Desktop: one deterministic rail, anchored to the CTA card's own right edge.
   .cta-section is the positioning containing block, so the rail's offset is
   measured from the card — never from the content column, the two-column
   grid's centre line, or a percentage-width decorative panel. */
@media (min-width: 1024px) {
  .cta-right-decor {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: clamp(230px, 16vw, 300px) !important;
  }

  .cta-right-decor .vslide-mask {
    position: absolute !important;
    top: 44px !important;
    bottom: 44px !important;
    right: clamp(18px, 1.5vw, 30px) !important;
    left: auto !important;
    width: clamp(172px, 14vw, 220px) !important;
  }
}

.cta-right-decor .float-dot,
.cta-right-decor > .absolute.bottom-0.origin-bottom {
  display: none !important;
}

.cta-right-duplicate { display: none !important; }

@media (max-width: 1023px) {
  .cta-section,
  .cta-content-grid { min-height: 0; }
  .cta-section { background-position: right center; }
}


/* ── Unified CTA → footer end-of-page surface ─────────────── */
as-cta, as-footer {
  display: block;
  margin: 16px auto 8px;
  max-width: 1876px;
  padding: 0 8px;
}
@media (min-width: 640px)  { as-cta, as-footer { padding: 0 16px; } }
@media (min-width: 1024px) { as-cta, as-footer { padding: 0 24px; } }

/* ── Pure-CSS hover pill animation (replaces GSAP) ── */
.hover-pill-btn { transition: transform .35s cubic-bezier(.22,1,.36,1); }
.hover-pill-btn:hover { transform: translateY(-1px); }
.hover-pill-btn .pill-fill { transition: width .62s cubic-bezier(.19,1,.22,1); top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important; }
.hover-pill-btn:hover .pill-fill { width: calc(100% - 10px) !important; }
.hover-pill-btn .pill-text { transition: color .26s ease; }
.hover-pill-btn:hover .pill-text { color: #ffffff !important; }
/* ── document scroll lock ──────────────────────────────────────────────
   Previously injected by script/as-navbar.js as <style data-as-nav-lock>.
   Same rules, same specificity, now shipped in a real stylesheet. The
   navbar still toggles the classes; only the CSS delivery moved. */
body.as-nav-lock,
body.as-nav-start-modal-lock {
  overflow: hidden !important;
}

/* ── footer mobile spacing ─────────────────────────────────────────────
   Moved out of the <style> element that used to sit inside the footer
   template markup in script/as-footer.js. Unchanged rules, unchanged
   !important weight, still scoped to .as-footer-shell.

   Rationale from the original block: the mobile footer stacks into a
   single column and the desktop Tailwind spacing (gap-y-10, space-y-4,
   mt-6, py-12) leaves huge gaps, so it is tightened here. */
@media (max-width: 640px) {
  .as-footer-shell .footer-body { padding-top: 32px !important; padding-bottom: 32px !important; }
  /* The four nav columns (Platform / Solutions / Resources / Company) were
     still stacking fully vertically below 640px — the Tailwind grid utility
     on .footer-main-grid only reflows to 2 columns at its own sm: (>=640px)
     breakpoint, so this size band got the single-column layout with none of
     the mobile spacing trims below able to make up for four ~8-item lists
     stacked end to end. Lay the nav columns out 2x2 instead, with the brand
     block spanning full width above them, cutting the scroll length roughly
     in half without tightening any single list beyond readability. */
  .as-footer-shell .footer-main-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    row-gap: 24px !important;
    column-gap: 17.6px !important;
  }
  .as-footer-shell .footer-main-grid > div:first-child {
    grid-column: 1 / -1 !important;
    max-width: 100% !important;
  }
  /* heading -> link list, and link-to-link spacing inside each nav column */
  .as-footer-shell .footer-nav-shift > ul {
    margin-top: 8.8px !important;
    font-size: 13.5px !important;
  }
  .as-footer-shell .footer-nav-shift > ul > li + li { margin-top: 6.4px !important; }
  .as-footer-shell .footer-nav-shift > ul > li { line-height: 1.3 !important; }
  /* bottom bar */
  .as-footer-shell .footer-bottom-bar { margin-top: 28px !important; padding-top: 24px !important; }
}