/* Public content actions only: never the site header, navigation, carousel,
   FAQ toggles or category tabs. Rolls-Royce Provenance's primary/secondary
   CTAs measured 276 × 46 CSS px at 1440, 820 and 390px (14 September 2026).
   Keep Zuvani's materials; share geometry and allow accessible text growth. */
:root {
  --content-button-width: 276px;
  --content-button-height: 46px;
  --content-button-font: .75rem;
  --content-button-tracking: .16em;
}

/* The narrowest public content column has 46px side insets. Use one shared
   compact width below 368px, rather than letting every page shrink its
   button by a different amount. 320px viewport => 228px button. */
@media (max-width: 367px) {
  :root { --content-button-width: calc(100vw - 92px); }
}

html body :is(
  main .conversion-cta,
  main .cta-link,
  main .home-vision__cta,
  main .outlined-cta,
  main .impact-follow__button,
  main .impact-gallery__cta,
  main .zuvani-process__cta,
  main .book-link,
  main .submit-button,
  .error-page > main > a,
  .blog-newsletter__actions > :is(a, button),
  .collective-signup-actions > :is(a, button),
  .impact-signup-actions > :is(a, button),
  [data-ff-el="root"] .fd-btn
) {
  /* Provider CSS is injected after page styles and sometimes uses inline
     dimensions. Override only presentation, not its state or submission. */
  box-sizing: border-box !important;
  position: relative;
  display: inline-flex !important;
  flex: 0 1 auto;
  align-items: center;
  justify-content: center;
  width: var(--content-button-width) !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: var(--content-button-height) !important;
  max-height: none !important;
  padding: 4px 16px !important;
  gap: 0 !important;
  border-radius: var(--btn-radius, 999px);
  font-family: var(--font-body) !important;
  font-size: var(--content-button-font) !important;
  font-weight: var(--weight-label, 500) !important;
  line-height: 1.5 !important;
  letter-spacing: var(--content-button-tracking) !important;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  white-space: normal !important;
  overflow-wrap: anywhere;
  text-wrap: balance;
  touch-action: manipulation;
}

/* Button labels and decorative arrows have separate slots: hover/press must
   never change the outer size. Long labels can use the same 46px, two-line
   frame; at larger text settings height is allowed to grow instead of clip. */
html body main :is(
  .conversion-cta, .home-vision__cta, .outlined-cta,
  .impact-follow__button, .impact-gallery__cta, .zuvani-process__cta
) > span:first-child:not([aria-hidden="true"]) {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

html body main :is(
  .conversion-cta, .home-vision__cta, .outlined-cta,
  .impact-follow__button, .impact-gallery__cta, .zuvani-process__cta
)[href] {
  padding-inline: 28px !important;
}

html body main .conversion-cta::after,
html body main .outlined-cta > span[aria-hidden="true"],
html body main .home-vision__cta > span[aria-hidden="true"],
html body main .impact-follow__button > span[aria-hidden="true"],
html body main .impact-gallery__cta > span[aria-hidden="true"],
html body main .zuvani-process__cta-arrow,
html body main .experience-booking__button > span[aria-hidden="true"] {
  position: absolute;
  inset-inline-end: 10px;
  top: 50%;
  translate: 0 -50%;
  width: 1em;
  min-width: 1em;
  max-width: 1em !important;
  margin: 0 !important;
  line-height: 1;
  pointer-events: none;
  transition-property: opacity, transform;
}

/* Keep empty/retry states hidden. Don't override Flodesk's busy/disabled
   attributes, native validation, consent fields or success messages. */
html body :is(
  .blog-newsletter__actions, .collective-signup-actions,
  .impact-signup-actions
) > [hidden] { display: none !important; }
html body [data-ff-el="root"] .fd-btn[hidden] { display: none !important; }

/* The enquiry embed has its own responsive zoom. Counter it on the button
   alone, so its visible size matches the rest of the site without resizing
   the fields or changing the form's existing reading/layout scale. */
html body .home-flodesk-embed [data-ff-el="root"] .fd-btn {
  zoom: calc(1 / var(--flodesk-scale, 1));
}

html body [data-ff-el="root"] .fd-btn {
  margin-inline: auto;
  border-radius: var(--btn-radius, 999px) !important;
  text-transform: uppercase !important;
}

html body [data-ff-el="root"] .fd-btn > span {
  font: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
  white-space: normal;
}

/* A 46px action sits centrally against the taller newsletter fields. */
html body .blog-newsletter [data-ff-el="root"] .fd-form-content {
  align-items: center;
}

/* Mobile content actions share the screen's centre line. Use normal layout,
   not positional transforms, so press feedback and text growth stay intact.
   Keep desktop/tablet alignment, page copy and header/carousel controls as-is. */
@media (max-width: 640px) {
  html body :is(
    main .conversion-cta,
    main .cta-link,
    main .home-vision__cta,
    main .outlined-cta,
    main .impact-follow__button,
    main .impact-gallery__cta,
    main .zuvani-process__cta,
    main .book-link,
    main .submit-button,
    .error-page > main > a,
    .blog-newsletter__actions > :is(a, button),
    .collective-signup-actions > :is(a, button),
    .impact-signup-actions > :is(a, button),
    [data-ff-el="root"] .fd-btn
  ):where(:not([hidden])) {
    display: flex !important;
    margin-inline: auto !important;
    justify-self: center;
    align-self: center;
  }
  /* Enlarged text must not widen the About/Africa grids and pull actions off-centre. */
  html body main .home-vision__content { min-width: 0; }
  html body main :is(.home-vision__body, .conversion-point) {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    overflow-wrap: anywhere;
  }
}