/* ==========================================================================
   Mobile final CTA — one phone design for every closing "ready to start?" card.
   Added 2026-09-25. Figma YmLzL45Qaw4FJRduYrQQM1 node 269:21 (362 x 383 card
   in a 390 frame).

   The card exists as eight separate copies, each styled in its own file:

     .automate      hire / service inner / service landing (figma-pages-base.css),
                    AI automation agency (+ ai-automation-agency.css), agentic AI
                    (agentic-ai.css)                                   54 pages
     .aids-final    /ai/ai-search-optimization/   ai-development-services.css
     .aib-final     /ai/ai-consulting-services/   ai-in-business.css
     .aud-final     /ai/ai-readiness-audit/       ai-audit.css
     .contact-cta   home                          content.css
     .abt-final     /about-us/                    about-us.css
     .crr-cta       /careers/                     career.css

   Below 768px this file overrides all eight, so the phone design is changed
   here once. Desktop and tablet (768px and up) are untouched and still come
   from each page's own file.

   How it wins: every selector is scoped `html body.tbi-btn-fx` (tbi-btn-fx is
   on every page), which puts a single-class target at (0,2,2), above each
   page's own (0,2,1) rules. It is also enqueued last (priority 101, after
   css/mobile-type-scale.css). No !important. Button :hover rules in
   css/button-hover.css are (0,3,1) and still apply.

   What stays per page: the copy, the AI audit's URL form (a working form,
   not a button) and the careers card having no button.
   ========================================================================== */

@media (max-width: 767px) {

  /* ---- Horizontal geometry: the card sits 14px in from each edge ---------- */

  /* Wrappers that carried a 20px gutter. */
  html body.tbi-btn-fx .aib-final,
  html body.tbi-btn-fx .abt-final,
  html body.tbi-btn-fx .aids-final__inner,
  html body.tbi-btn-fx .contact-cta__container,
  html body.tbi-btn-fx .crr-cta .crr-container {
    padding-left: 14px;
    padding-right: 14px;
  }

  /* ---- The card ----------------------------------------------------------- */

  /* Background = Figma 269:22, the lower of the two art layers: the plane,
     drawn at 96.18% of the card height and pushed right so it sits on the
     right edge. Only ~10% of it shows through the layer above, which is what
     leaves the plane as a faint shape. The positions are the Figma layer's
     own offsets expressed as percentages, so they hold for any card height. */
  html body.tbi-btn-fx .automate__card,
  html body.tbi-btn-fx .aids-final__card,
  html body.tbi-btn-fx .aib-final__card,
  html body.tbi-btn-fx .aud-final__card,
  html body.tbi-btn-fx .contact-cta__card,
  html body.tbi-btn-fx .abt-final__card,
  html body.tbi-btn-fx .crr-cta__card {
    position: relative;
    isolation: isolate;
    display: block;
    width: auto;
    max-width: none;
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 10px;
    box-shadow: none;
    text-align: center;
    background: #050111 url("../assets/images/common/finalcta-art.webp") no-repeat 93.92% 216.2% / auto 96.18%;
  }

  /* These two sit directly in a zero-padding section. */
  html body.tbi-btn-fx .automate__card,
  html body.tbi-btn-fx .aud-final__card {
    margin-left: 14px;
    margin-right: 14px;
  }

  /* Figma 269:23, the upper art layer at 90%: the same image covering the
     card's height, centred, which is the dark-to-violet gradient. */
  html body.tbi-btn-fx .automate__card::before,
  html body.tbi-btn-fx .aids-final__card::before,
  html body.tbi-btn-fx .aib-final__card::before,
  html body.tbi-btn-fx .aud-final__card::before,
  html body.tbi-btn-fx .contact-cta__card::before,
  html body.tbi-btn-fx .abt-final__card::before,
  html body.tbi-btn-fx .crr-cta__card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: url("../assets/images/common/finalcta-art.webp") no-repeat 50% 0 / auto 101.04%;
    opacity: 0.9;
    pointer-events: none;
  }

  /* Each page's own desktop art is replaced by the two layers above. Every
     one of these is loading="lazy", so hidden it is never downloaded. */
  html body.tbi-btn-fx .automate__bgimg,
  html body.tbi-btn-fx .aids-final__scene,
  html body.tbi-btn-fx .aib-final__art,
  html body.tbi-btn-fx .aud-final__scene,
  html body.tbi-btn-fx .abt-final__art,
  html body.tbi-btn-fx .crr-cta__art {
    display: none;
  }

  /* ---- Content column: 64px top and bottom, 14px sides -------------------- */

  html body.tbi-btn-fx .automate__content,
  html body.tbi-btn-fx .aids-final__content,
  html body.tbi-btn-fx .aib-final__inner,
  html body.tbi-btn-fx .aud-final__inner,
  html body.tbi-btn-fx .contact-cta__inner,
  html body.tbi-btn-fx .abt-final__inner,
  html body.tbi-btn-fx .crr-cta__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 64px 14px;
    box-sizing: border-box;
    text-align: center;
  }

  /* ---- Eyebrow: Inter Bold 12, 2px tracking, 16px above the heading ------- */

  html body.tbi-btn-fx .automate__eyebrow,
  html body.tbi-btn-fx .aids-final__eyebrow,
  html body.tbi-btn-fx .aib-final__eyebrow,
  html body.tbi-btn-fx .aud-final .aud-eyebrow,
  html body.tbi-btn-fx .contact-cta__eyebrow,
  html body.tbi-btn-fx .abt-final__eyebrow,
  html body.tbi-btn-fx .crr-cta .crr-eyebrow {
    width: 100%;
    max-width: none;
    margin: 0 0 16px;
    padding: 0;
    font-family: var(--font-base, "Inter", sans-serif);
    font-optical-sizing: none;
    font-weight: 700;
    font-size: 12px;
    line-height: 1.19;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #cab5ff;
    opacity: 1;
    text-align: center;
  }

  /* ---- Heading: Inter Black 26/31.2, cap-trimmed, 24px above the copy ---- */

  html body.tbi-btn-fx .automate__heading,
  html body.tbi-btn-fx .aids-final__heading,
  html body.tbi-btn-fx .aib-final__heading,
  html body.tbi-btn-fx .aud-final__heading,
  html body.tbi-btn-fx .contact-cta__heading,
  html body.tbi-btn-fx .abt-final__heading,
  html body.tbi-btn-fx .crr-cta__title {
    width: 100%;
    max-width: none;
    margin: 0 0 24px;
    padding: 0;
    font-family: var(--font-base, "Inter", sans-serif);
    font-optical-sizing: none;
    font-style: normal;
    font-weight: 900;
    font-size: 26px;
    line-height: 31.2px;
    letter-spacing: 0;
    text-transform: none;
    color: #ffffff;
    text-align: center;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }

  /* ---- Copy: Inter 15/28 at 80%, cap-trimmed, 32px above the button ------ */

  /* 278px is the design's text column: in Figma the copy and the button share
     one auto-layout group whose width is the button's, so the copy wraps at
     278 rather than at the card's 334 (that is what puts "practical" on the
     third line). */
  html body.tbi-btn-fx .automate__desc,
  html body.tbi-btn-fx .aids-final__desc,
  html body.tbi-btn-fx .aib-final__body,
  html body.tbi-btn-fx .aud-final__lede,
  html body.tbi-btn-fx .contact-cta__description,
  html body.tbi-btn-fx .abt-final__body,
  html body.tbi-btn-fx .crr-cta__body {
    width: 100%;
    max-width: 278px;
    margin: 0 0 32px;
    padding: 0;
    font-family: var(--font-base, "Inter", sans-serif);
    font-optical-sizing: none;
    font-weight: 400;
    font-size: 15px;
    line-height: 28px;
    letter-spacing: 0;
    color: #ffffff;
    opacity: 0.8;
    text-align: center;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }

  /* Careers has no button, so its copy ends the card. */
  html body.tbi-btn-fx .crr-cta__body {
    margin-bottom: 0;
  }

  /* ---- Button: #f7e934, 32px sides, hugs its label, 6px to the arrow ----- */

  /* 16 + 20 + 16 = 52px, Figma's height: at a 20px line box Inter's cap
     height sits centred, which is what Figma's cap-trimmed label gives. */
  html body.tbi-btn-fx .automate__btn,
  html body.tbi-btn-fx .aids-final__btn,
  html body.tbi-btn-fx .aib-final__btn,
  html body.tbi-btn-fx .contact-cta__button,
  html body.tbi-btn-fx .abt-final__btn {
    display: inline-flex;
    flex: none;
    align-self: center;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    max-width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 16px 32px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background-color: #f7e934;
    color: #151515;
    font-family: var(--font-base, "Inter", sans-serif);
    font-optical-sizing: none;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    text-align: center;
  }

  /* about-us.css cap-trims its label span, which took the button to 43.6px. */
  html body.tbi-btn-fx .aids-final__btn span,
  html body.tbi-btn-fx .aib-final__btn span,
  html body.tbi-btn-fx .abt-final__btn span {
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    text-box-trim: none;
  }

  /* One arrow for all of them: Figma's own glyph is byte-identical to
     assets/icons/hire-common/arrow-right-btn.svg. The pages' markup carries
     four different arrows (one of them an up-arrow rotated 90deg), so those
     are hidden here and this one is drawn instead. */
  html body.tbi-btn-fx .automate__btn img,
  html body.tbi-btn-fx .aids-final__btn svg,
  html body.tbi-btn-fx .aib-final__btn img,
  html body.tbi-btn-fx .abt-final__btn img,
  html body.tbi-btn-fx .contact-cta__button-arrow {
    display: none;
  }

  html body.tbi-btn-fx .automate__btn::after,
  html body.tbi-btn-fx .aids-final__btn::after,
  html body.tbi-btn-fx .aib-final__btn::after,
  html body.tbi-btn-fx .contact-cta__button::after,
  html body.tbi-btn-fx .abt-final__btn::after {
    content: "";
    flex: none;
    width: 14.2px;
    height: 10.5629px;
    margin: 0 -0.35px;
    background: url("../assets/icons/hire-common/arrow-right-btn.svg") no-repeat center / 100% 100%;
  }

  /* ---- Per-copy structure ------------------------------------------------- */

  /* Home nests heading and copy in two groups (the same 24 / 32 grouping as
     the Figma node), so the spacing comes from their gaps instead of margins. */
  html body.tbi-btn-fx .contact-cta__group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
    margin: 0;
  }

  html body.tbi-btn-fx .contact-cta__group--32 {
    gap: 32px;
  }

  html body.tbi-btn-fx .contact-cta__heading,
  html body.tbi-btn-fx .contact-cta__description {
    margin-bottom: 0;
  }

  /* AI audit: the URL form takes the button's place, 32px under the copy
     (the lede's margin); the form itself keeps its own styling. The form is
     full width, so by the same Figma rule as above the copy is too. */
  html body.tbi-btn-fx .aud-final__lede {
    max-width: none;
  }

  html body.tbi-btn-fx .aud-final .aud-form {
    width: 100%;
    margin-top: 0;
  }
}

/* The longest labels ("Let's start the discussion", 278px) do not fit the
   264px column of a 320px phone at 32px sides. */
@media (max-width: 359px) {
  html body.tbi-btn-fx .automate__btn,
  html body.tbi-btn-fx .aids-final__btn,
  html body.tbi-btn-fx .aib-final__btn,
  html body.tbi-btn-fx .contact-cta__button,
  html body.tbi-btn-fx .abt-final__btn {
    padding-left: 20px;
    padding-right: 20px;
  }
}