/*
 * Orrku site-wide stability layer
 *
 * This file intentionally loads after the legacy master stylesheets and all
 * Astro component CSS. It owns only cross-template primitives and confirmed
 * layout repairs; page-specific visual direction stays with each component.
 */

:root {
  --site-ink: #0b0d0f;
  --site-panel: #121518;
  --site-paper: #faf8f3;
  --site-muted: #68645f;
  --site-orange: #ff9200;
  --site-orange-hover: #e98200;
  --site-coast: #0d7180;
  --site-gutter: clamp(16px, 4vw, 64px);
  --site-section: clamp(72px, 8vw, 112px);
  --site-radius: 16px;
  --site-btn-height: 48px;
  --site-btn-height-compact: 40px;
  --site-btn-radius: 11px;
  --site-btn-ease: cubic-bezier(.22, 1, .36, 1);
  --site-btn-shadow: 0 1px 0 rgba(255,255,255,.34) inset,
    0 12px 26px -18px rgba(123,65,0,.78);
  --site-btn-shadow-hover: 0 1px 0 rgba(255,255,255,.42) inset,
    0 18px 34px -18px rgba(123,65,0,.88);
}

html {
  max-width: 100%;
  overflow-x: clip;
  background: var(--site-ink);
}

body,
.body-wrapper,
main {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  color: #24211e;
  background: var(--site-paper);
  font-family: var(--font-body, "DM Sans", sans-serif) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main img,
main video,
main iframe,
main svg {
  max-width: 100%;
}

main :where(h1, h2, h3, p, li, a, span) {
  overflow-wrap: break-word;
}

main :where(p, li) {
  line-height: 1.62;
}

/* Keep all page content usable when optional animation code is unavailable. */
main :where(
  .has_fade_anim,
  .has_text_move_anim,
  .has_char_anim,
  .img_anim_reveal,
  [data-fade-from],
  [data-reveal]
) {
  opacity: 1 !important;
  visibility: visible !important;
  clip-path: none !important;
}

main .img_anim_reveal img {
  opacity: 1 !important;
  visibility: visible !important;
}

/* One stable navigation row. Contact details remain in the footer/contact UI. */
.oh-util {
  display: none !important;
}

/* Keep announcement and navigation in one deterministic stack. The legacy
   sticky class could otherwise move the nav beneath a still-visible banner. */
html.has-announcement-bar .ab-bar--in,
html.has-announcement-bar:has(.oh.sticky) .ab-bar--in {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

html.has-announcement-bar:has(.ab-bar:not([hidden]).ab-bar--in) .oh,
html.has-announcement-bar:has(.ab-bar:not([hidden]).ab-bar--in) .oh.sticky,
html.has-announcement-bar:has(.ab-bar:not([hidden]).ab-bar--in) .header-area.oh,
html.has-announcement-bar:has(.ab-bar:not([hidden]).ab-bar--in) .header-area.oh.sticky {
  top: max(var(--ab-height), 50px) !important;
}

.oh-main {
  background: rgba(9, 11, 12, 0.98) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.oh-main-inner,
.oh.sticky .oh-main-inner,
.oh.header-pinned .oh-main-inner {
  min-height: 72px;
  padding-block: 12px !important;
}

.oh-nav-link {
  color: rgba(255, 255, 255, 0.72) !important;
}

.oh-nav-link:hover,
.oh-nav-link:focus-visible {
  color: #fff !important;
}

/* The template duplicated every primary action with two decorative links. */
.body-wrapper .wc-btn-group {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  max-width: 100%;
  height: auto !important;
  gap: 0 !important;
}

.body-wrapper .wc-btn-group > a.wc-btn-circle {
  display: none !important;
}

.body-wrapper .wc-btn-group > .wc-btn-primary,
.body-wrapper a.wc-btn-primary {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  max-width: 100%;
  min-height: 48px;
  padding: 13px 24px !important;
  border: 1px solid #f18700 !important;
  border-radius: var(--site-btn-radius) !important;
  background: linear-gradient(180deg, #ffa51f 0%, var(--site-orange) 58%, #f78b00 100%) !important;
  color: #17120c !important;
  font-family: var(--font-body, "DM Sans", sans-serif) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-align: center;
  text-decoration: none !important;
  text-transform: none !important;
  white-space: normal !important;
  box-shadow: var(--site-btn-shadow) !important;
}

.body-wrapper .wc-btn-group > .wc-btn-primary:hover,
.body-wrapper a.wc-btn-primary:hover {
  border-color: #df7900 !important;
  background: linear-gradient(180deg, #ffad2f 0%, #fb8c00 64%, #ed8000 100%) !important;
  color: #17120c !important;
  transform: translateY(-2px);
  box-shadow: var(--site-btn-shadow-hover) !important;
}

.body-wrapper :where(a, button, summary, input, select, textarea):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--site-coast) 70%, white) !important;
  outline-offset: 3px !important;
}

/* --------------------------------------------------------------------------
   Site-wide button system

   The project contains several generations of page-specific CTA names. These
   rules give all of them the same interaction language while retaining the
   layout and hierarchy authored for each section.
   -------------------------------------------------------------------------- */

button,
[role="button"] {
  font: inherit;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button:not(:disabled),
[role="button"]:not([aria-disabled="true"]) {
  cursor: pointer;
}

button:disabled,
[role="button"][aria-disabled="true"] {
  cursor: not-allowed !important;
  opacity: .56;
}

.has-button-system :is(a, button):is(
  [class*="btn"],
  [class*="cta"],
  [class*="submit"],
  [class*="action"]
) {
  box-sizing: border-box;
  max-width: 100%;
  font-family: var(--font-body, "DM Sans", sans-serif);
  text-decoration: none;
  text-rendering: geometricPrecision;
  -webkit-tap-highlight-color: transparent;
  transition-property: color, background-color, border-color, box-shadow, opacity, filter, transform;
  transition-duration: 220ms;
  transition-timing-function: var(--site-btn-ease);
}

/* Primary conversion actions. */
.has-button-system :is(
  .wc-btn-primary,
  .abx-button--dark,
  .vs-btn--primary,
  .hslide-btn,
  .svh-btn,
  .arh-btn,
  .wk-hero-cta,
  .ar-why-cta,
  .cta-sv-action,
  .pr-primary-cta,
  .ft-cta-action,
  .ct-submit,
  .aud-submit,
  .ind-lead-form__submit,
  .pt-form-submit,
  .cm-submit,
  .alp-submit,
  .alp-done-btn,
  .bp-sb-cta-btn,
  .bp-mobile-cta-btn,
  .ph-cc-cta,
  .pkg-card-cta,
  .pkg-tbl-buy,
  .pkg-mid-cta-btn,
  .pkg-upgrade-btn,
  .pkg-guarantee-cta,
  .pb-cta-btn,
  .pb-toc-cta,
  .geo-audit-btn,
  .aiv-hero-btn,
  .aiv-audit-btn,
  .tool-cta--primary,
  .si2-wide-cta,
  .ad-cta-btn,
  .ad-summer-cta,
  .sop-cta,
  .ofm-cta,
  .ob-cta-primary,
  .phone-otp-primary
) {
  position: relative;
  display: inline-flex;
  min-height: var(--site-btn-height);
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 22px;
  border: 1px solid #f18700;
  border-radius: var(--site-btn-radius);
  background: linear-gradient(180deg, #ffa51f 0%, var(--site-orange) 58%, #f78b00 100%);
  color: #18120a;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
  text-align: center;
  box-shadow: var(--site-btn-shadow);
}

/* Secondary, outline and utility actions. */
.has-button-system :is(
  .hslide-btn-ghost,
  .svh-btn-ghost,
  .arh-btn-ghost,
  .abx-button--outline,
  .vs-btn--outline,
  .pr-card__cta,
  .tool-cta:not(.tool-cta--primary),
  .ob-cta-secondary,
  .cm-offers-link,
  .sop-decline,
  .ofm-decline,
  .phone-otp-secondary,
  .bl-page-btn,
  .pb-chapter-nav-hub,
  .pb-chapter-nav-next,
  .ar-pricing-cta-link
) {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: var(--site-btn-radius);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset;
}

/* Compact state controls are quieter than conversion actions. */
.has-button-system :is(
  .wk-filter,
  .ph-cc-tog,
  .pkg-tbl-expand,
  .pb-toc-toggle,
  .svc-accordion-trigger
) {
  min-height: var(--site-btn-height-compact);
  font-family: var(--font-body, "DM Sans", sans-serif);
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease,
    box-shadow 180ms ease, transform 180ms ease;
}

.has-button-system .wk-filter[aria-pressed="true"],
.has-button-system .ph-cc-tog[aria-pressed="true"] {
  box-shadow: 0 0 0 2px rgba(255,146,0,.16), 0 8px 18px -14px rgba(0,0,0,.7);
}

/* Every icon-only control gets a dependable touch target without losing its
   own visual treatment. */
.has-button-system :is(
  .fm-close,
  .oh-burger,
  .ab-bar-close,
  .alp-close,
  .cm-close,
  .ob-close,
  .ob-mini-open,
  .ob-mini-dismiss,
  .sop-close,
  .ofm-close,
  .industries-nav-icon,
  .tm-lt-nav-btn,
  .hslide-arrow,
  .wk-testi-prev,
  .wk-testi-next,
  .bp-sb-share-btn,
  .pb-copy,
  .tool-copy,
  .phone-otp-close
) {
  min-width: 42px;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease,
    box-shadow 180ms ease, opacity 180ms ease, transform 180ms ease;
}

.has-button-system :is(.hslide-dot) {
  min-width: 18px;
  min-height: 18px;
  padding: 5px;
  background-clip: content-box;
}

.has-button-system :is(
  .wc-btn-primary,
  .abx-button--dark,
  .vs-btn--primary,
  .hslide-btn,
  .svh-btn,
  .arh-btn,
  .wk-hero-cta,
  .ar-why-cta,
  .cta-sv-action,
  .pr-primary-cta,
  .ft-cta-action,
  .ct-submit,
  .aud-submit,
  .ind-lead-form__submit,
  .pt-form-submit,
  .cm-submit,
  .alp-submit,
  .alp-done-btn,
  .bp-sb-cta-btn,
  .bp-mobile-cta-btn,
  .ph-cc-cta,
  .pkg-card-cta,
  .pkg-tbl-buy,
  .pkg-mid-cta-btn,
  .pkg-upgrade-btn,
  .pkg-guarantee-cta,
  .pb-cta-btn,
  .pb-toc-cta,
  .geo-audit-btn,
  .aiv-hero-btn,
  .aiv-audit-btn,
  .tool-cta--primary,
  .si2-wide-cta,
  .ad-cta-btn,
  .ad-summer-cta,
  .sop-cta,
  .ofm-cta,
  .ob-cta-primary,
  .phone-otp-primary
) :is(i, svg):last-child {
  flex: 0 0 auto;
  transition: transform 220ms var(--site-btn-ease);
}

@media (hover: hover) and (pointer: fine) {
  .has-button-system :is(
    .wc-btn-primary,
    .abx-button--dark,
    .vs-btn--primary,
    .hslide-btn,
    .svh-btn,
    .arh-btn,
    .wk-hero-cta,
    .ar-why-cta,
    .cta-sv-action,
    .pr-primary-cta,
    .ft-cta-action,
    .ct-submit,
    .aud-submit,
    .ind-lead-form__submit,
    .pt-form-submit,
    .cm-submit,
    .alp-submit,
    .alp-done-btn,
    .bp-sb-cta-btn,
    .bp-mobile-cta-btn,
    .ph-cc-cta,
    .pkg-card-cta,
    .pkg-tbl-buy,
    .pkg-mid-cta-btn,
    .pkg-upgrade-btn,
    .pkg-guarantee-cta,
    .pb-cta-btn,
    .pb-toc-cta,
    .geo-audit-btn,
    .aiv-hero-btn,
    .aiv-audit-btn,
    .tool-cta--primary,
    .si2-wide-cta,
    .ad-cta-btn,
    .ad-summer-cta,
    .sop-cta,
    .ofm-cta,
    .ob-cta-primary,
    .phone-otp-primary
  ):not(:disabled):hover {
    border-color: #df7900;
    background: linear-gradient(180deg, #ffad2f 0%, #fb8c00 64%, #ed8000 100%);
    color: #18120a;
    filter: saturate(1.04);
    transform: translateY(-2px);
    box-shadow: var(--site-btn-shadow-hover);
  }

  .has-button-system :is(
    .wc-btn-primary,
    .abx-button--dark,
    .vs-btn--primary,
    .hslide-btn,
    .svh-btn,
    .arh-btn,
    .wk-hero-cta,
    .ar-why-cta,
    .cta-sv-action,
    .pr-primary-cta,
    .ft-cta-action,
    .ct-submit,
    .aud-submit,
    .ind-lead-form__submit,
    .pt-form-submit,
    .cm-submit,
    .alp-submit,
    .bp-sb-cta-btn,
    .bp-mobile-cta-btn,
    .ph-cc-cta,
    .pkg-card-cta,
    .pkg-tbl-buy,
    .pkg-mid-cta-btn,
    .pkg-upgrade-btn,
    .pkg-guarantee-cta,
    .pb-cta-btn,
    .geo-audit-btn,
    .aiv-hero-btn,
    .aiv-audit-btn,
    .tool-cta--primary,
    .si2-wide-cta,
    .ad-cta-btn,
    .ad-summer-cta,
    .sop-cta,
    .ofm-cta,
    .ob-cta-primary
  ):hover :is(i, svg):last-child {
    transform: translateX(3px);
  }

  .has-button-system :is(
    .hslide-btn-ghost,
    .svh-btn-ghost,
    .arh-btn-ghost,
    .abx-button--outline,
    .vs-btn--outline,
    .pr-card__cta,
    .tool-cta:not(.tool-cta--primary),
    .ob-cta-secondary,
    .cm-offers-link,
    .sop-decline,
    .ofm-decline,
    .phone-otp-secondary,
    .bl-page-btn,
    .pb-chapter-nav-hub,
    .pb-chapter-nav-next,
    .ar-pricing-cta-link
  ):not([aria-disabled="true"]):not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -18px rgba(0,0,0,.6);
  }

  .has-button-system :is(
    .fm-close,
    .oh-burger,
    .ab-bar-close,
    .alp-close,
    .cm-close,
    .ob-close,
    .ob-mini-open,
    .ob-mini-dismiss,
    .sop-close,
    .ofm-close,
    .industries-nav-icon,
    .tm-lt-nav-btn,
    .hslide-arrow,
    .wk-testi-prev,
    .wk-testi-next,
    .bp-sb-share-btn,
    .pb-copy,
    .tool-copy,
    .phone-otp-close
  ):hover {
    transform: translateY(-1px);
  }
}

.has-button-system :is(a, button):is(
  [class*="btn"],
  [class*="cta"],
  [class*="submit"],
  [class*="action"]
):not([aria-disabled="true"]):not(:disabled):active {
  transform: translateY(0) scale(.98);
  transition-duration: 80ms;
}

.has-button-system :is(a, button)[aria-disabled="true"] {
  pointer-events: none;
}

/* Cookie-consent controls belong to the same system even though the library
   renders them at runtime outside .body-wrapper. */
#cc-main :is(.cm__btn, .pm__btn) {
  min-height: 44px;
  border-radius: var(--site-btn-radius);
  font-family: var(--font-body, "DM Sans", sans-serif);
  font-weight: 700;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease,
    box-shadow 180ms ease, transform 180ms ease;
}

#cc-main :is(.cm__btn, .pm__btn):active {
  transform: scale(.98);
}

/* Shared vertical rhythm without overriding authored component grids. */
.section-spacing,
.section-spacing-top {
  padding-top: var(--site-section) !important;
}

.section-spacing,
.section-spacing-bottom {
  padding-bottom: var(--site-section) !important;
}

.section-title {
  margin-top: 0 !important;
  padding-top: 0 !important;
  line-height: 1.04 !important;
}

/* About: the legacy master rule is missing at runtime, collapsing the hero. */
.hero-area.ab-hero-3d {
  min-height: clamp(590px, 72vh, 760px) !important;
  display: flex;
  align-items: center;
  background: var(--site-ink);
}

.ab-hero-3d .hero-area-inner {
  width: 100%;
  padding: clamp(178px, 20vh, 230px) 0 clamp(80px, 10vh, 112px) !important;
}

.ab-hero-3d .section-title.large {
  max-width: 14ch;
  margin-inline: auto !important;
  font-size: clamp(48px, 6vw, 84px) !important;
}

.ab-hero-3d .content-last {
  display: grid !important;
  grid-template-columns: minmax(0, 620px) !important;
  justify-content: center !important;
  margin-top: 28px !important;
}

.ab-hero-3d .content-last .text {
  max-width: 62ch !important;
  color: rgba(255, 255, 255, 0.72) !important;
}

.ab-hero-3d .btn-wrapper {
  margin-top: 24px;
}

/* Blog: restore the introductory masthead hidden beneath the fixed header. */
main > .featured-area:first-child {
  min-height: 500px;
  display: flex;
  align-items: center;
  padding: clamp(170px, 18vh, 210px) 0 80px !important;
  background: var(--site-paper);
}

main > .featured-area:first-child .featured-area-inner {
  width: 100%;
  padding: 0 !important;
}

main > .featured-area:first-child .section-title.large {
  max-width: 14ch;
  font-size: clamp(54px, 7vw, 92px) !important;
  color: var(--site-ink) !important;
}

main > .featured-area:first-child .text-box {
  margin-top: 28px !important;
}

/* Work index: this card used white copy on an almost-white translucent fill. */
.wk-deepdive-link {
  background: var(--site-panel) !important;
  border-color: rgba(255, 146, 0, 0.28) !important;
  box-shadow: 0 18px 50px rgba(11, 13, 15, 0.12);
}

.wk-deepdive-link:hover {
  background: #181c1f !important;
}

.wk-deepdive-title {
  color: #fff !important;
}

.wk-deepdive-desc {
  color: rgba(255, 255, 255, 0.68) !important;
}

/* Contact: its original 80px phone inset sat underneath the 115px banner/nav. */
main > .ct-hero:first-child {
  padding-top: clamp(150px, 13vw, 188px) !important;
}

/* Packages: keep the five tiers comparable without turning the mobile page
   into a five-card vertical marathon. These selectors are intentionally page
   specific and load after the legacy package stylesheet. */
.pkg-card-mobile-cue,
.pkg-table-mobile-cue,
.pkg-tbl-head-spacer span {
  display: none;
}

/* Stop decorative ambient shapes from increasing the document width. */
.ab-bar,
.oh,
.fm-screen,
.ph-hero,
.ph-visual,
.ab-hero-3d,
.body-wrapper > footer {
  max-width: 100vw;
  overflow-x: clip;
}

@media (max-width: 991px) {
  .oh-main-inner,
  .oh.sticky .oh-main-inner,
  .oh.header-pinned .oh-main-inner {
    min-height: 64px;
    padding-block: 10px !important;
  }

  .oh-logo img {
    height: 31px !important;
    max-width: min(245px, 68vw) !important;
  }

  .container,
  .container.large,
  .container-xl,
  .container-fluid {
    max-width: 100% !important;
  }

  .body-wrapper .wc-btn-group,
  .body-wrapper .wc-btn-group > .wc-btn-primary {
    max-width: 100% !important;
  }

  .hero-area.ab-hero-3d {
    min-height: auto !important;
  }

  .ab-hero-3d .hero-area-inner {
    padding: 138px 0 76px !important;
  }

  .ab-hero-3d .section-title.large {
    max-width: 12ch;
    margin-inline: 0 !important;
    font-size: clamp(38px, 10vw, 56px) !important;
    text-align: left !important;
  }

  .ab-hero-3d .content-last {
    justify-content: start !important;
  }

  main > .featured-area:first-child {
    min-height: auto;
    padding: 140px 0 64px !important;
  }

  main > .featured-area:first-child .section-title.large {
    font-size: clamp(42px, 12vw, 62px) !important;
  }

  main > .ct-hero:first-child {
    padding-top: 140px !important;
  }
}

@media (max-width: 575px) {
  :root {
    --site-section: 64px;
  }

  .container,
  .container.large,
  .container-xl,
  .container-fluid {
    width: 100% !important;
    padding-inline: 16px !important;
    margin-inline: auto !important;
  }

  main :where(h1.section-title.large, .ph-title, .svc-hero-title, .ind-hero-title) {
    font-size: clamp(36px, 11vw, 50px) !important;
    line-height: 0.98 !important;
  }

  .body-wrapper .wc-btn-group {
    width: 100% !important;
  }

  .body-wrapper .wc-btn-group > .wc-btn-primary {
    width: 100% !important;
    min-height: 50px;
    padding-inline: 18px !important;
  }

  .wk-deepdive-link {
    border-radius: 14px !important;
  }

  .ft-cta-headline {
    font-size: clamp(38px, 12vw, 54px) !important;
  }
}

@media (max-width: 699px) {
  .pkg-cards-section {
    padding: 56px 0 64px !important;
    overflow: hidden;
  }

  .pkg-card-mobile-cue,
  .pkg-table-mobile-cue {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    color: #756b60;
    font-family: var(--font-body, "DM Sans", sans-serif);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.35;
    text-transform: uppercase;
  }

  .pkg-card-mobile-cue::after,
  .pkg-table-mobile-cue::after {
    width: 34px;
    height: 1px;
    flex: 0 0 auto;
    background: var(--site-orange);
    content: "";
  }

  .body-wrapper .pkg-grid-5 {
    display: flex !important;
    width: calc(100% + 32px) !important;
    max-width: none !important;
    margin-inline: -16px !important;
    padding: 20px 16px 32px !important;
    align-items: stretch !important;
    flex-flow: row nowrap !important;
    gap: 12px !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 16px;
    scroll-snap-type: inline mandatory;
    scrollbar-color: rgba(255,146,0,.65) rgba(28,21,12,.08);
    scrollbar-width: thin;
  }

  .body-wrapper .pkg-grid-5 .pkg-card,
  .body-wrapper .pkg-grid-5 .pkg-card:first-child,
  .body-wrapper .pkg-grid-5 .pkg-card:last-child {
    width: min(86vw, 340px) !important;
    flex: 0 0 min(86vw, 340px) !important;
    margin-block: 0 !important;
    border: 1px solid rgba(28,21,12,.1) !important;
    border-radius: 18px !important;
    background: #f5f2eb !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .body-wrapper .pkg-grid-5 .pkg-card--pop {
    border-color: rgba(255,146,0,.28) !important;
    background: linear-gradient(180deg, #161310 0%, #0a0806 100%) !important;
    box-shadow: 0 20px 42px -26px rgba(0,0,0,.65) !important;
  }
}

@media (max-width: 767px) {
  .pkg-compare-header {
    margin-bottom: 18px !important;
  }

  .pkg-table-mobile-cue {
    max-width: 34ch;
    margin: 0 auto 20px;
  }

  .body-wrapper .pkg-tbl {
    position: relative;
    padding-bottom: 12px;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    scrollbar-color: rgba(255,146,0,.65) rgba(28,21,12,.08);
    scrollbar-width: thin;
  }

  .body-wrapper .pkg-tbl-head-spacer {
    position: sticky;
    left: 0;
    z-index: 6;
    display: flex !important;
    align-items: flex-end;
    padding: 16px 14px;
    border-radius: 14px 14px 0 0;
    background: #ede9e1;
    box-shadow: 12px 0 20px -18px rgba(28,21,12,.5);
  }

  .body-wrapper .pkg-tbl-head-spacer span {
    display: block;
    color: #6c6257;
    font-family: var(--font-body, "DM Sans", sans-serif);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  .body-wrapper .pkg-tbl-feature {
    position: sticky;
    left: 0;
    z-index: 5;
    display: flex !important;
    min-width: 0;
    align-items: center;
    padding-inline: 14px !important;
    background: #fff;
    box-shadow: 12px 0 20px -18px rgba(28,21,12,.45);
  }

  .body-wrapper .pkg-tbl-feature,
  .body-wrapper .pkg-tbl-feature span {
    color: #4e463d !important;
    font-size: 11px !important;
    line-height: 1.35;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}