/**
 * BuyTryShare — cross-device / cross-browser corrections.
 *
 * Loaded last (after bts-custom.css) so it wins without !important escalation.
 * Scope: phones (iPhone/Android), tablets, desktop, large screens, and the
 * Safari/Firefox/Edge gaps in the base stylesheets.
 */

/* ==========================================================================
   1. Horizontal overflow containment
   `clip` does not create a scroll container, so smooth scroll and any
   sticky/fixed descendants keep working. `hidden` is the pre-Safari-16 fallback.
   ========================================================================== */

html,
body {
  overflow-x: clip;
}

@supports not (overflow-x: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

body {
  max-width: 100%;
}

/* Stops iOS Safari inflating body copy when the phone is rotated to landscape. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ==========================================================================
   2. Long-word wrapping
   The base stylesheets set no wrapping rules, so emails, URLs and German
   compounds (bts-lang-de) push past their container on narrow screens.
   ========================================================================== */

/* Inherited, so it also covers inline spans that carry the long words.
   `break-word` only breaks a word that cannot fit on a line by itself. */
body {
  overflow-wrap: break-word;
}

/*
 * `break-word` prevents visual overflow but does not shrink an element's
 * min-content width, so a single long word still stretches a flex/grid item
 * past its track. `anywhere` does affect intrinsic sizing, which is what
 * German compounds ("Verbrauchervertrauensstatistik") need.
 */
@media (max-width: 900px) {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    overflow-wrap: anywhere;
  }
}

body.bts-lang-de h1,
body.bts-lang-de h2,
body.bts-lang-de h3,
body.bts-lang-de h4 {
  overflow-wrap: anywhere;
  hyphens: auto;
}

/*
 * Grid and flex items default to `min-width: auto`, so a wide child forces the
 * item past its track. These wrappers hold the long-copy columns.
 */
.intro-copy,
.intro-section__grid > *,
.story-section__copy,
.compliance-section__copy,
.leaders-card,
.hero-highlights__card,
.insights-card,
.insights-container > * {
  min-width: 0;
}

/* ==========================================================================
   3. Homepage intro animation — phones and tablets
   ========================================================================== */

/*
 * The animated wordmark is `white-space: nowrap`, and its font-size clamp had a
 * 96px/82px floor, so "Buy.Try.Share." could not shrink below ~600px of text.
 * Sizes below stay under the available width from 320px upward; desktop is
 * unchanged because the upper bounds still bind there.
 */
.hero-logo-sequence__word {
  font-size: clamp(40px, min(10.2vw, 18.5vh, 200px), 200px);
}

.hero-logo-sequence__full {
  font-size: clamp(28px, min(10.4vw, 16vh, 160px), 160px);
}

/* Belt-and-braces: the stage can never contribute page-level scroll. */
.hero-logo-sequence {
  overflow-x: clip;
}

@media (max-width: 980px) {
  .hero-logo-sequence__word {
    font-size: min(13vw, 15vh);
  }

  .hero-logo-sequence__full {
    font-size: min(9.4vw, 11vh);
  }
}

@media (max-width: 600px) {
  .hero-logo-sequence__word {
    font-size: min(15vw, 14vh);
  }

  .hero-logo-sequence__full {
    font-size: min(11.5vw, 10vh);
  }
}

/*
 * Vertical space for the animation was only reserved at >=901px, so on phones
 * and portrait tablets the wordmark overlapped the headline and audience cards.
 */
@media (max-width: 900px) {
  body.hero-sequence-active .hero-section {
    min-height: clamp(460px, 74vh, 820px);
  }
}

/* iOS/Android URL bars resize the viewport; dvh keeps the stage stable. */
@media (min-width: 901px) {
  @supports (height: 100dvh) {
    .hero-logo-sequence {
      height: clamp(380px, 78dvh, 920px);
    }
  }
}

@media (max-width: 900px) {
  @supports (height: 100dvh) {
    body.hero-sequence-active .hero-section {
      min-height: clamp(460px, 74dvh, 820px);
    }
  }
}

/*
 * The words are centred on the stage via `top: 50%`, and the stage is 78vh
 * tall. Above 900px that lands the wordmark in the empty band between the
 * header and the divider rule. On phones and portrait tablets the band is only
 * ~230–490px tall (it is driven by --hero-balance-gap, not by vh), so a 78vh
 * stage centred the wordmark *below* the divider, on top of the audience cards.
 * Heights below match the measured band at each tier.
 */
@media (max-width: 900px) {
  .hero-logo-sequence {
    height: min(500px, 52vh);
  }
}

@media (max-width: 600px) {
  .hero-logo-sequence {
    height: min(250px, 44vh);
  }
}

/*
 * The docked tagline is scaled by --hero-title-scale (0.4 from JS). At <=480px
 * the hero title is 14px, which docked to ~5.6px. main-scripts.js now sends a
 * width-aware scale; this keeps the docked box readable and inside the gutter.
 */
@media (max-width: 900px) {
  body.hero-sequence-done .hero-section__title.is-revealed.is-docked {
    max-width: calc(100vw - 32px);
    width: auto;
  }
}

/* ==========================================================================
   3b. Homepage formula board
   The <=480px block pins the board to 390px and each node to 250px, so on
   320–390px viewports the "= ROI" node was clipped by the 290–360px container.
   ========================================================================== */

@media (max-width: 480px) {
  .formula-board {
    width: 100%;
    max-width: 390px;
    margin-inline: auto;
    justify-items: center;
  }

  .formula-node {
    width: min(100%, 250px);
    margin-inline: auto;
  }
}

/* ==========================================================================
   3b2. Homepage card decks — centred on mobile and tablet
   style.css left-aligns .hero-highlights__card below 980px. Below the mobile
   nav breakpoint the cards are single-column, so centre the icon, heading and
   copy for both the hero audience deck and the "Designed for the Leaders"
   deck.
   ========================================================================== */

@media (max-width: 980px) {
  .hero-highlights {
    justify-items: center;
  }

  .hero-highlights__card,
  a.hero-highlights__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-inline: auto;
  }

  .hero-highlights__card h2,
  .hero-highlights__card p {
    width: 100%;
    text-align: center;
  }

  .hero-highlights__icon,
  .hero-highlights__icon--vendor {
    align-self: center;
    margin-inline: auto;
  }

  .hero-highlights__icon img {
    margin-inline: auto;
  }

  .leaders-grid {
    justify-items: center;
  }

  .leaders-card,
  a.leaders-card {
    align-items: center;
    text-align: center;
  }

  .leaders-card h3,
  .leaders-card p {
    width: 100%;
    text-align: center;
  }

  .leaders-card__icon,
  .leaders-card__icon img {
    align-self: center;
    margin-inline: auto;
  }

  .leaders-card a {
    align-self: center;
  }
}

/* ==========================================================================
   3c. Homepage "Media -> Attention / Platforms -> Trust" flow diagram
   Two nowrap columns plus a fixed 48px gap need ~463px, which overflowed both
   the 290px mobile container and the 360px desktop copy column once the labels
   were translated (Aufmerksamkeit, Verbraucher).
   ========================================================================== */

.intro-flow-diagram {
  flex-wrap: wrap;
}

.intro-flow-diagram__col {
  min-width: 0;
}

.intro-flow-diagram__label,
.intro-flow-diagram__arrow,
.intro-flow-diagram__target {
  min-width: 0;
  max-width: 100%;
}

/*
 * On mobile the two columns stay side by side and are centred under the copy
 * (the inline style right-aligns them for the desktop two-column layout).
 * The fixed 18px/30px type is what forced the pair past the ~290px container,
 * so it goes fluid here; `flex-wrap: wrap` above stays as the last resort for
 * a translation longer than anything currently shipped.
 */
@media (max-width: 600px) {
  .intro-flow-diagram {
    justify-content: center;
    align-items: flex-start;
    gap: clamp(12px, 3.2vw, 48px);
    margin-top: 40px;
  }

  .intro-flow-diagram__label {
    font-size: clamp(12px, 3.6vw, 18px);
  }

  .intro-flow-diagram__arrow {
    font-size: clamp(15px, 4.6vw, 24px);
  }

  .intro-flow-diagram__target {
    font-size: clamp(16px, 5.8vw, 30px);
  }
}

/*
 * Tablet (iPad / ~601–1024): homepage section polish.
 * - hero-highlights + insights (#insights intro): centred
 * - formula: horizontal board centred (not the stacked phone layout)
 * - leaders-section: centred heading/intro + 3-up card row
 */
@media (min-width: 601px) and (max-width: 1024px) {
  /* ----- insights (intro-section) — centred ----- */
  .intro-section__grid {
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: clamp(40px, 5vw, 56px);
  }

  .intro-copy {
    width: 100%;
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
  }

  .intro-copy__message {
    max-width: 28ch;
    margin-inline: auto;
    text-align: center;
  }

  .intro-copy__impact {
    font-size: clamp(1.55rem, 2.6vw, 1.9rem);
    line-height: 1.34;
    letter-spacing: -0.02em;
    text-align: center;
  }

  .intro-copy__impact + .intro-copy__impact {
    margin-top: 0.65rem;
  }

  .intro-copy__impact-strong {
    font-weight: 800;
  }

  .intro-copy__impact-light {
    font-weight: 300;
  }

  .intro-flow-diagram {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(56px, 9vw, 88px);
    width: auto;
    max-width: 100%;
    margin-top: 64px !important;
    margin-bottom: 8px;
    margin-inline: auto;
    padding-left: 0;
  }

  .intro-flow-diagram__col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    text-align: center;
    min-width: 0;
  }

  .intro-flow-diagram__label {
    display: block;
    width: 100%;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.25;
    letter-spacing: 0.01em;
    color: rgba(248, 250, 252, 0.7);
    text-align: center;
  }

  .intro-flow-diagram__arrow {
    display: block;
    width: 100%;
    font-size: 22px;
    font-weight: 300;
    line-height: 1.2;
    color: rgba(248, 250, 252, 0.5);
    text-align: center;
  }

  .intro-flow-diagram__target {
    display: block;
    width: 100%;
    font-size: clamp(28px, 3.6vw, 34px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: #f8fafc;
    text-align: center;
  }

  .intro-section__tagline {
    text-align: center;
    margin-inline: auto;
  }

  .intro-section__divider {
    margin-inline: auto;
  }

  .intro-visual {
    width: 100%;
    max-width: 920px;
    margin-inline: auto;
  }

  /* ----- hero-highlights — centred 3-up ----- */
  .hero-highlights {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: center;
    justify-items: center;
    gap: clamp(18px, 2.8vw, 32px);
    width: 100%;
    max-width: min(920px, 100%);
    margin-inline: auto;
  }

  .hero-highlights__card,
  a.hero-highlights__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 280px;
    margin-inline: auto;
    text-align: center;
  }

  .hero-highlights__card h2,
  .hero-highlights__card p {
    width: 100%;
    text-align: center;
  }

  .hero-highlights__icon,
  .hero-highlights__icon--vendor {
    align-self: center;
    margin-inline: auto;
  }

  .hero-highlights__icon img {
    margin-inline: auto;
  }

  /* ----- formula — horizontal + centred ----- */
  .formula-section {
    padding-top: clamp(56px, 7vw, 88px);
    padding-bottom: clamp(56px, 7vw, 88px);
  }

  .formula-section > .page-container {
    align-items: center;
  }

  .formula-section > .page-container > .section-heading {
    max-width: 20ch;
    margin-inline: auto;
    text-align: center;
  }

  .formula-board {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    width: min(100%, 720px);
    max-width: 720px;
    justify-content: center;
    align-items: center;
    gap: clamp(4px, 1.2vw, 12px);
    margin-top: 48px;
    margin-inline: auto;
  }

  .formula-board__operator {
    display: grid;
    place-items: center;
    font-size: clamp(36px, 5.5vw, 52px);
    transform: none;
    margin: 0;
  }

  .formula-node {
    width: 100%;
    max-width: 180px;
    height: auto;
    aspect-ratio: 1 / 1;
    padding: clamp(22px, 3vw, 32px) clamp(12px, 2vw, 20px);
    margin-inline: auto;
    justify-self: center;
  }

  .formula-node__icon {
    width: 42px;
    height: 42px;
    margin-bottom: 12px;
  }

  .formula-node h3 {
    font-size: clamp(18px, 2.4vw, 22px);
  }

  .formula-node p,
  .formula-node__sub {
    font-size: clamp(12px, 1.6vw, 14px);
  }

  .formula-copy {
    width: 100%;
    max-width: 640px;
    margin-top: 48px;
    margin-inline: auto;
    align-self: center;
    text-align: center;
  }

  .formula-copy__lead,
  .formula-copy__body {
    max-width: 36ch;
    margin-inline: auto;
    text-align: center;
  }

  /* ----- leaders-section — centred ----- */
  .leaders-section {
    padding-top: clamp(56px, 7vw, 88px);
    padding-bottom: clamp(56px, 7vw, 88px);
  }

  .leaders-section > .page-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .leaders-section h2 {
    max-width: 22ch;
    margin-inline: auto;
    text-align: center;
  }

  .leaders-section__intro {
    max-width: 46ch;
    margin-top: 20px;
    margin-inline: auto;
    text-align: center;
  }

  .leaders-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: center;
    justify-items: stretch;
    gap: clamp(16px, 2.4vw, 24px);
    width: 100%;
    max-width: min(920px, 100%);
    margin-top: 36px;
    margin-inline: auto;
  }

  .leaders-card,
  a.leaders-card {
    align-items: center;
    text-align: center;
    min-height: 0;
    padding: 24px 20px 22px;
  }

  .leaders-card h3,
  .leaders-card p {
    width: 100%;
    text-align: center;
  }

  .leaders-card__icon,
  .leaders-card__icon img {
    align-self: center;
    margin-inline: auto;
  }

  .leaders-card a {
    align-self: center;
  }
}

/* ==========================================================================
   3d. Hard-coded 40px headings
   style.css steps its own 40px headings down to 30px under 480px, but the
   Insights titles were left at 40px and overflowed their cards.
   ========================================================================== */

@media (max-width: 720px) {
  .insights-page .insights-title,
  .insights-page .insights-title--md,
  .insights-page .insights-title-last-section {
    font-size: clamp(1.5rem, 6.6vw, 2.5rem);
    line-height: 1.22;
  }
}

/* Flex children still resolve to min-content unless told otherwise. */
.insights-card > *,
.insights-bars,
.insights-bars__row {
  min-width: 0;
}

/* ==========================================================================
   3e. Insights bar charts
   The 152px/112px label column plus the axis track exceeded the ~272px of card
   content available at 320px, pushing the "25%" axis label off screen.
   ========================================================================== */

@media (max-width: 420px) {
  .insights-page .insights-bars {
    --insights-bar-label-col: 84px;
  }

  .insights-page .insights-bars__axis {
    font-size: clamp(0.7rem, 3vw, 0.95rem);
  }
}

/* ==========================================================================
   3f. Proof of Concept page
   ========================================================================== */

/*
 * The hero subtitle is forced onto one line above 981px. That holds for the
 * English copy it was tuned against, but the translated sentences are longer
 * and were clipped at tablet-landscape widths.
 */
body.bts-lang-fr .proof-page .proof-hero p.proof-hero__sub,
body.bts-lang-es .proof-page .proof-hero p.proof-hero__sub,
body.bts-lang-de .proof-page .proof-hero p.proof-hero__sub {
  white-space: normal;
}

/*
 * The ramp is a horizontal scroller below 900px but switches to `overflow:
 * visible` above it, so translated step labels were clipped instead of
 * scrollable. Keeping `auto` is invisible when the row already fits.
 */
@media (min-width: 900px) {
  .proof-ramp-wrap {
    overflow-x: auto;
    overflow-y: hidden;
  }
}

/* ==========================================================================
   4. Large screens
   >=1600px intentionally keeps the base wordmark scale and hero band height
   from style.css — that composition is already correct on the live site. The
   large-screen defect was in the JS flight geometry (the cloned logo kept
   shrinking past ~2000px), corrected in js/main-scripts.js.
   ========================================================================== */

/* ==========================================================================
   5. Mobile navigation overlay
   `width: 100vw` includes the classic scrollbar width, which produced a
   horizontal scroll on Windows Chrome/Edge at tablet widths; `100vh` left the
   panel short of the fold on iOS Safari.
   ========================================================================== */

@media (max-width: 980px) {
  .site-header__toggle:checked ~ .site-nav {
    width: 100%;
    max-width: 100%;
    padding-right: max(24px, env(safe-area-inset-right));
    padding-left: max(24px, env(safe-area-inset-left));
    padding-bottom: max(24px, env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  @supports (min-height: 100dvh) {
    .site-header__toggle:checked ~ .site-nav {
      min-height: 100dvh;
    }
  }
}

/*
 * Tablet only (769–980): pack hamburger menu items so the full list fits
 * one viewport. Phone (≤768) already has this in bts-custom; desktop (>980)
 * keeps the horizontal nav — do not touch those ranges.
 */
@media (min-width: 769px) and (max-width: 980px) {
  .site-header__toggle:checked ~ .site-nav {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: stretch;
    gap: 2px;
    min-height: 0;
    height: auto;
    max-height: 100vh;
    max-height: 100dvh;
    padding-top: 64px;
    padding-bottom: 20px;
    overflow-y: auto;
  }

  html body ul#site-nav-list.site-nav__list,
  .site-header__toggle:checked ~ .site-nav .site-nav__list {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    gap: 2px !important;
    align-content: flex-start !important;
    justify-content: flex-start !important;
  }

  html body ul#site-nav-list.site-nav__list .menu-item,
  .site-header__toggle:checked ~ .site-nav .menu-item {
    width: 100% !important;
    margin: 0;
    padding: 0;
  }

  .site-header__toggle:checked ~ .site-nav .site-nav__link,
  .site-header__toggle:checked ~ .site-nav .menu-item a {
    padding: 6px 0;
    font-size: 1.05rem;
    line-height: 1.3;
    font-weight: 600;
  }
}

/* Notch / rounded-corner clearance for the fixed header. */
.site-header__inner {
  padding-right: max(0px, env(safe-area-inset-right));
  padding-left: max(0px, env(safe-area-inset-left));
}

/* ==========================================================================
   6. iOS Safari background painting
   The base rule is `body:not(.bts-blog-page):not(.bts-blog-single)::before`,
   so the mobile `body::before { background-attachment: scroll }` override lost
   on specificity and `fixed` stayed active — which iOS Safari renders at the
   wrong scale and repaints on every scroll.
   ========================================================================== */

@media (max-width: 980px) {
  body:not(.bts-blog-page):not(.bts-blog-single)::before {
    background-attachment: scroll;
  }
}

/* Touch devices of any width hit the same iOS/Android repaint cost. */
@media (hover: none) and (pointer: coarse) {
  body:not(.bts-blog-page):not(.bts-blog-single)::before {
    background-attachment: scroll;
  }
}

/* ==========================================================================
   7. Media and embeds
   ========================================================================== */

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

/* Wide data tables scroll inside their own box instead of widening the page. */
table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

pre,
code {
  overflow-wrap: break-word;
  white-space: pre-wrap;
}

/* ==========================================================================
   8. Firefox / Safari form and control normalisation
   ========================================================================== */

input,
select,
textarea,
button {
  max-width: 100%;
  font-family: inherit;
}

/* iOS zooms the page when a focused field is under 16px. */
@media (max-width: 900px) {
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px;
  }
}

textarea {
  resize: vertical;
}

/* ==========================================================================
   9. Mobile header — compact CTA + flag 16×12 + clearer gaps (imgs 6, 8)
   Longer FR/ES/DE labels ("PoC starten", "Lancer un PoC") must not crowd the
   flag or burger. Flag matches the tighter live mobile size.
   ========================================================================== */

@media (max-width: 480px) {
  /* Absolute header: tighten CTA↔flag cluster and leave a clear gap to burger. */
  .site-header__actions {
    gap: 6px;
    right: 52px;
  }

  .site-language.bts-lang-dropdown__btn,
  .bts-lang-dropdown__btn {
    padding: 0;
    gap: 3px;
  }

  .site-language img,
  .bts-lang-dropdown__btn img {
    width: 16px !important;
    height: 12px !important;
    max-width: 16px;
    object-fit: cover;
  }

  .site-language__arrow {
    width: 8px;
    height: 8px;
  }

  .site-header__menu {
    width: 24px;
    height: 24px;
    gap: 4px;
    right: 16px;
  }

  .site-header__cta {
    min-height: 28px;
    padding: 4px 10px;
    font-size: 12px;
    line-height: 1.2;
  }

  body.bts-lang-de .site-header__cta,
  body.bts-lang-fr .site-header__cta,
  body.bts-lang-es .site-header__cta {
    min-height: 28px;
    padding: 4px 8px;
    font-size: 11px;
    letter-spacing: -0.01em;
  }
}

/* ==========================================================================
   10. Legal pages — H1 32px + visible dividers (imgs 3–5)
   Templates: page-terms-of-use / privacy-policy / legal-notice / cookie-policy.
   Live also serves some of these via page-template-default; cover both.
   ========================================================================== */

body.page-template-page-terms-of-use section.compliance-hero h1.compliance-hero__headline,
body.page-template-page-terms-of-use section.compliance-hero h1#hero-heading,
body.page-template-page-privacy-policy section.compliance-hero h1.compliance-hero__headline,
body.page-template-page-privacy-policy section.compliance-hero h1#hero-heading,
body.page-template-page-legal-notice section.compliance-hero h1.compliance-hero__headline,
body.page-template-page-legal-notice section.compliance-hero h1#hero-heading,
body.page-template-page-cookie-policy section.compliance-hero h1.compliance-hero__headline,
body.page-template-page-cookie-policy section.compliance-hero h1#hero-heading,
body.page-id-42 section.compliance-hero h1.compliance-hero__headline,
body.page-id-42 section.compliance-hero h1#hero-heading,
body.page-id-47 section.compliance-hero h1.compliance-hero__headline,
body.page-id-47 section.compliance-hero h1#hero-heading,
body.page-id-50 section.compliance-hero h1.compliance-hero__headline,
body.page-id-50 section.compliance-hero h1#hero-heading,
body.page-id-59 section.compliance-hero h1.compliance-hero__headline,
body.page-id-61 section.compliance-hero h1.compliance-hero__headline,
body.page-id-63 section.compliance-hero h1.compliance-hero__headline,
body.page-id-65 section.compliance-hero h1.compliance-hero__headline {
  font-size: 32px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}

/* Kill bts-custom absolute HR pin (live page-ids) so the divider sits in flow. */
body.page-template-page-terms-of-use hr.fading-border,
body.page-template-page-privacy-policy hr.fading-border,
body.page-template-page-legal-notice hr.fading-border,
body.page-template-page-cookie-policy hr.fading-border,
body.page-id-42 hr.fading-border,
body.page-id-47 hr.fading-border,
body.page-id-50 hr.fading-border,
body.page-id-59 hr.fading-border,
body.page-id-61 hr.fading-border,
body.page-id-63 hr.fading-border,
body.page-id-65 hr.fading-border {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 2px !important;
  min-height: 2px !important;
  margin: 0 !important;
  transform: translateZ(0) !important;
  background-size: 100% 2px !important;
  background-image: linear-gradient(
    90deg,
    transparent 6%,
    rgba(0, 112, 192, 0.7) 26%,
    #1484eb 50%,
    rgba(0, 112, 192, 0.7) 74%,
    transparent 94%
  ) !important;
}