/* ==========================================================================
   AI in Your Business — page-ai-in-business.php
   Figma: YmLzL45Qaw4FJRduYrQQM1 "brihaspatitech-figma-implementation"
          node 99:3118 "Ai-in-Business" (one 1520x10462 desktop frame)

   Every selector is scoped under body.page-template-page-ai-in-business on
   purpose: content.css loads on EVERY page and defines its own unscoped
   .hero / .faq__* / .container rules that would otherwise collide. Same
   reasoning as css/ai-automation-agency.css and css/agentic-ai.css.

   Values come from per-section Figma MCP get_design_context pulls; the
   derived value table is checked in at
   e2e-tests/figma-reference/ai-in-business/digest-99-3118.md. Section bands,
   marquee row pitch, pill height and the final-CTA card box were measured off
   the 1:1 frame export (full.png) in that same folder.

   RESPONSIVE: node 99:3118 is the ONLY frame for this design — there is no
   tablet frame and no mobile frame anywhere in it. Everything below 1520px is
   therefore this build's own interpretation and is NOT Figma-verified.
   Blocks that are interpretation are marked INTERPRETED.
   ========================================================================== */

body.page-template-page-ai-in-business {
  /* Figma frame 99:3118 fill. */
  background: #020010;
}

body.page-template-page-ai-in-business .aib-page {
  --aib-gutter: var(--container-padding-inline, 40px);
  background: #020010;
  overflow-x: clip; /* contains the hero art's deliberate 40px right bleed */

  /* Inter is loaded as a variable font WITH an optical-size axis (opsz
     14..32, see the tbi-ai-fonts enqueue in functions.php). CSS defaults to
     `font-optical-sizing: auto`, which interpolates opsz toward the font-size
     — so at 64px the browser silently renders the Display cut instead of the
     text cut Figma renders, an ~8% glyph-width error on every large Inter
     element that a computed-style check cannot see (family/size/weight all
     still read correct). Set once here so it inherits to every section.
     Scoped to .aib-page, so the sitewide header and footer are untouched.
     Same fix, same reason, as css/ai-automation-agency.css. */
  font-optical-sizing: none;
}

body.page-template-page-ai-in-business .aib-container {
  max-width: var(--container-max-width, 1520px);
  margin: 0 auto;
  padding: 0 var(--aib-gutter);
  box-sizing: border-box;
}

/* Shared eyebrow — Figma 99:3142 / 99:3495 / 99:3519 / 99:3298 / 99:3151 /
   99:3558 / 99:3293: Inter, 12px, 2.86px tracking, uppercase, #cab5ff. */
body.page-template-page-ai-in-business .aib-eyebrow {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.19;
  letter-spacing: 2.86px;
  text-transform: uppercase;
  color: #cab5ff;
}

/* Figma 99:3998 / 99:3625 — same eyebrow on the two light sections. */
body.page-template-page-ai-in-business .aib-eyebrow--light {
  color: #9a60fb;
}

/* Figma 99:3203 — the Business-Opportunities eyebrow is the one that is
   DM Sans Black, not Inter Bold. */
body.page-template-page-ai-in-business .aib-eyebrow--dm {
  font-family: var(--font-mono-label);
  font-weight: 900;
  line-height: normal;
  color: #9a60fb;
  /* Figma 99:3203 marks this one text-box-trimmed; the other eyebrows are not. */
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* Shared yellow CTA button — Figma 99:3489 / 99:3268 / 99:3289. */
body.page-template-page-ai-in-business .aib-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 56px;
  padding: 0 20px;
  background: var(--color-cta-bg, #f7e934);
  color: var(--color-cta-text, #151515);
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 15px;
  line-height: normal;
  text-transform: uppercase;
  border-radius: 0; /* Figma draws these square — no radius on any of the three */
  transition: filter .2s ease;
}

body.page-template-page-ai-in-business .aib-btn:hover,
body.page-template-page-ai-in-business .aib-btn:focus-visible {
  filter: brightness(.94);
}

body.page-template-page-ai-in-business .aib-btn img {
  flex: none;
}

/* ==========================================================================
   1. HERO — Figma 99:3120 (art) + 99:3138 (copy)
   Frame coords: header ends y=77, hero band y=77..792 (715 tall), art group
   99:3121 is 1560.04x704.56 starting at y=92, copy block 99:3139 at
   x=40 y=244 (=167 from the band top), 751 wide / 298 tall.
   ========================================================================== */
body.page-template-page-ai-in-business .aib-hero {
  position: relative;
  min-height: 715px;
  background: #00000f;
}

body.page-template-page-ai-in-business .aib-hero__bg {
  position: absolute;
  top: 15px; /* frame y=92 minus the 77px header */
  left: 0;
  width: 102.6339%; /* 1560.035 / 1520 — the art bleeds 40px past the frame */
  height: 704.5625px;
  z-index: 0;
  pointer-events: none;
}

body.page-template-page-ai-in-business .aib-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}

body.page-template-page-ai-in-business .aib-hero__inner {
  position: relative;
  z-index: 1;
  padding-top: 167px;
  padding-bottom: 250px;
}

body.page-template-page-ai-in-business .aib-hero__content {
  max-width: 551px;
}

body.page-template-page-ai-in-business .aib-hero__eyebrow {
  margin: 0 0 20px;
  font-family: var(--font-base);
  font-weight: 600;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 2.86px;
  text-transform: uppercase;
  color: #cab5ff;
}

/* Figma 99:3144 is marked text-box-trim:trim-both / text-box-edge:cap
   alphabetic — the 68px line-height carries no extra leading above the caps.
   Applied rather than fudging the line-height down to compensate. */
body.page-template-page-ai-in-business .aib-hero__heading {
  margin: 0 0 28px;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 64px;
  line-height: 68px;
  color: #fff;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

body.page-template-page-ai-in-business .aib-hero__lede {
  margin: 0;
  max-width: 599px; /* Figma 99:3145 is a fixed 599px, wider than its 551px parent */
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 25px;
  line-height: 40px;
  color: rgba(255, 255, 255, .82);
}

/* ==========================================================================
   2. AI IMPACT STATS — Figma 99:3492 (y 792..1008, 216 tall, #100C19)
   ========================================================================== */
body.page-template-page-ai-in-business .aib-impact {
  background: #100c19;
  padding: 55px 0;
}

body.page-template-page-ai-in-business .aib-impact__row {
  display: flex;
  align-items: center;
  gap: 128px;
}

body.page-template-page-ai-in-business .aib-impact__intro {
  flex: none;
  width: 390px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

body.page-template-page-ai-in-business .aib-impact__lede {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 15px;
  line-height: 28px;
  color: #aaa5b3;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

body.page-template-page-ai-in-business .aib-impact__stats {
  display: flex;
  gap: 35px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.page-template-page-ai-in-business .aib-impact__stat {
  flex: none;
  width: 258.391px;
  padding-left: 24px;
  border-left: 1px solid rgba(160, 100, 255, .3);
  display: flex;
  flex-direction: column;
}

body.page-template-page-ai-in-business .aib-impact__num {
  display: block;
  padding-bottom: 8px; /* Figma 99:3499 "Margin" is 65.6 tall with 8px bottom pad */
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 57.6px;
  line-height: 57.6px;
  color: #fff;
}

body.page-template-page-ai-in-business .aib-impact__caption {
  display: block;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: #aaa5b3;
}

/* ==========================================================================
   3. BUSINESS PROBLEMS — Figma 99:3516
   Band y 1008..1880: 120 top pad + 632 content + 120 bottom pad.
   ========================================================================== */
body.page-template-page-ai-in-business .aib-problems {
  padding: 120px 0;
}

body.page-template-page-ai-in-business .aib-problems__row {
  display: flex;
  align-items: flex-start;
  gap: 80px;
}

body.page-template-page-ai-in-business .aib-problems__intro {
  flex: none;
  width: 486px;
}

/* Figma 99:3521 / 99:3522 are two fixed-width text nodes (486 white,
   339 purple), which is what makes the heading break as
   "Where does / work / slow / down?". Reproducing the widths rather than
   hard-coding <br>s keeps it re-flowing once the column narrows. */
body.page-template-page-ai-in-business .aib-problems__heading {
  margin: 20px 0 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 76px;
  line-height: 78.3px;
  letter-spacing: -5px;
}

body.page-template-page-ai-in-business .aib-problems__heading-a,
body.page-template-page-ai-in-business .aib-problems__heading-b {
  display: block;
}

body.page-template-page-ai-in-business .aib-problems__heading-a {
  width: 486px;
  max-width: 100%;
  color: #fff;
}

body.page-template-page-ai-in-business .aib-problems__heading-b {
  width: 339px;
  max-width: 100%;
  color: #b96cff;
}

body.page-template-page-ai-in-business .aib-problems__lede {
  margin: 32px 0 0;
  max-width: 486px;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 18px;
  line-height: 28.8px;
  color: #c7c1cc;
}

body.page-template-page-ai-in-business .aib-problems__grid {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.page-template-page-ai-in-business .aib-problems__card {
  min-height: 200px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #100a21;
  border: 1px solid rgba(168, 114, 216, .3);
  border-radius: 20px;
  box-sizing: border-box;
}

body.page-template-page-ai-in-business .aib-problems__dash {
  display: block;
  flex: none;
  width: 34.891px;
  height: 3.063px;
  background: #b96cff;
}

/* Figma 99:3541 and 99:3549 declare Roboto Bold where the other four cards
   declare Inter Bold at the same size and colour, and all six render
   identically in the 1:1 export — a stale font override on two instances,
   not a design decision. Built as Inter for all six. */
body.page-template-page-ai-in-business .aib-problems__card-title {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 22px;
  line-height: normal;
  color: #fff;
}

body.page-template-page-ai-in-business .aib-problems__card-body {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: rgba(255, 255, 255, .7);
}

/* ==========================================================================
   4. WHERE AI CAN HELP + MID CTA — Figma 99:3295
   Band y 1880..3117: 0 top pad (the problems band already supplies 120 of
   gap) + 1117 content + 120 bottom pad.
   ========================================================================== */
body.page-template-page-ai-in-business .aib-work {
  padding: 0 0 120px;
}

body.page-template-page-ai-in-business .aib-work__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

body.page-template-page-ai-in-business .aib-work__heading {
  margin: 0;
  max-width: 1106px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 76px;
  line-height: 78.34px;
  letter-spacing: -3.46px;
  color: #fff;
}

body.page-template-page-ai-in-business .aib-work__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 19px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}

body.page-template-page-ai-in-business .aib-work__card {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 20px 20px 33px 16px;
  background: #0f0821;
  border: 1px solid rgba(185, 108, 255, .32);
  border-radius: 25px;
  box-sizing: border-box;
}

/* Figma 99:3304 — the illustration plate: 309.891 x 380.76, #1C162D, r10.
   Held by aspect ratio so the exported artwork keeps its designed position
   as the card narrows. */
body.page-template-page-ai-in-business .aib-work__panel {
  position: relative;
  width: 100%;
  padding-top: 122.8698%; /* 380.76 / 309.891 */
  background: #1c162d;
  border-radius: 10px;
  overflow: hidden;
}

body.page-template-page-ai-in-business .aib-work__art {
  position: absolute;
  width: auto;
  height: auto;
}

/* Offsets recovered from the #1C162D rect position inside each unstripped
   Figma export, expressed against the 309.891 x 380.76 plate. */
body.page-template-page-ai-in-business .aib-work__art--1 {
  left: 6.4184%;
  top: 11.7869%;
  width: 89.7089%;
  height: 80.6282%;
}

body.page-template-page-ai-in-business .aib-work__art--2 {
  left: 2.3261%;
  top: 14.4571%;
  width: 95.1954%;
  height: 73.5372%;
}

body.page-template-page-ai-in-business .aib-work__art--3 {
  left: 6.1136%;
  top: 19.0094%;
  width: 87.4501%;
  height: 61.9813%;
}

body.page-template-page-ai-in-business .aib-work__art--4 {
  left: .9683%;
  top: 10.8677%;
  width: 97.7761%;
  height: 83.2543%;
}

body.page-template-page-ai-in-business .aib-work__text {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

body.page-template-page-ai-in-business .aib-work__kicker {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 10px;
  line-height: 13px;
  letter-spacing: 1.86px;
  text-transform: uppercase;
  color: #cab5ff;
}

body.page-template-page-ai-in-business .aib-work__title {
  margin: -2px 0 0; /* the 16px gap in Figma 99:3338 minus the 18px column gap */
  font-family: var(--font-base);
  font-weight: 900;
  font-size: 22px;
  line-height: 31.6px;
  color: #fff;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

body.page-template-page-ai-in-business .aib-work__body {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 15px;
  line-height: 28px;
  color: rgba(255, 255, 255, .7);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* Mid-page CTA band — Figma 99:3483. */
body.page-template-page-ai-in-business .aib-midcta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-top: 64px;
  padding: 40px;
  background: #0f0821;
  border: 1px solid rgba(185, 108, 255, .32);
  border-radius: 25px;
}

body.page-template-page-ai-in-business .aib-midcta__text {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 746px;
}

body.page-template-page-ai-in-business .aib-midcta__title {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 34px;
  line-height: normal;
  letter-spacing: -2.46px;
  color: #fff;
}

/* Figma 99:3488 marks this text-box-trimmed; without it the two 28px lines
   carry their full leading and the band renders 16px taller than the
   181px Figma draws. */
body.page-template-page-ai-in-business .aib-midcta__body {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  color: rgba(255, 255, 255, .6);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

body.page-template-page-ai-in-business .aib-midcta__btn {
  flex: none;
  min-width: 239.812px;
}

/* ==========================================================================
   5. MEET JOVIAN — Figma 99:3551
   Band y 3117..3961: 120 top pad + 604 content + 120 bottom pad.
   ========================================================================== */
body.page-template-page-ai-in-business .aib-jovian {
  position: relative;
  padding: 120px 0;
  isolation: isolate;
}

/* Figma 99:3554 "Ellipse 6873" — a 538 x 520.72 blurred purple ellipse whose
   centre sits ABOVE this band (frame y 2746.87), so only its lower arc shows.
   Cropped 1:1 out of the frame export rather than re-derived as a CSS
   gradient: it is a blurred ellipse over flat #020010, so the crop is exact
   and the section's own #020010 continues it seamlessly. */
body.page-template-page-ai-in-business .aib-jovian::before {
  content: "";
  position: absolute;
  top: -370px; /* frame 2747 minus the band start 3117 */
  right: 0;
  width: 451px;
  height: 521px;
  background: url("../assets/images/ai-in-business/jovian-glow.webp") no-repeat center / 100% 100%;
  z-index: -1;
  pointer-events: none;
}

body.page-template-page-ai-in-business .aib-jovian__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 993px;
  margin: 0 auto;
  text-align: center;
}

body.page-template-page-ai-in-business .aib-jovian__heading {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 76px;
  line-height: 78.34px;
  letter-spacing: -3.46px;
  color: #fff;
}

/* Card — Figma 99:3562: 1120 outer, 4px rgba(96,65,177,.4) stroke at r15,
   inner fill a #FCFDFD -> #EEF2FE linear gradient running from (4,4) to
   (1132.74, 295.299), i.e. 104.5deg in CSS terms. */
body.page-template-page-ai-in-business .aib-jovian__card {
  max-width: 1120px;
  margin: 48px auto 0;
  border: 4px solid rgba(96, 65, 177, .4);
  border-radius: 17px;
  background: linear-gradient(104.5deg, #fcfdfd 0%, #eef2fe 100%);
  overflow: hidden;
}

body.page-template-page-ai-in-business .aib-jovian__bar {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}

body.page-template-page-ai-in-business .aib-jovian__avatar {
  flex: none;
  width: 39px;
  height: 39px;
}

body.page-template-page-ai-in-business .aib-jovian__avatar--msg {
  width: 35px;
  height: 35px;
}

body.page-template-page-ai-in-business .aib-jovian__who {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

body.page-template-page-ai-in-business .aib-jovian__name {
  font-family: var(--font-mono-label);
  font-weight: 700;
  font-size: 16px;
  line-height: normal;
  color: #1c1c1c;
}

body.page-template-page-ai-in-business .aib-jovian__role {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono-label);
  font-weight: 700;
  font-size: 11px;
  line-height: normal;
  letter-spacing: .55px;
  text-transform: uppercase;
  color: #8e8e8e;
}

body.page-template-page-ai-in-business .aib-jovian__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ece6f7;
}

body.page-template-page-ai-in-business .aib-jovian__body {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 24px 20px 28px;
}

body.page-template-page-ai-in-business .aib-jovian__thread {
  flex: 1 1 auto;
  min-width: 0;
}

/* Figma 99:3580 — white, r10, 1px rgba(0,0,0,.1). */
body.page-template-page-ai-in-business .aib-jovian__bubble {
  padding: 16px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 10px;
}

body.page-template-page-ai-in-business .aib-jovian__bubble p {
  margin: 0;
  font-family: var(--font-mono-label);
  font-weight: 400;
  font-size: 14px;
  line-height: 25px;
  color: rgba(28, 28, 28, .9);
}

body.page-template-page-ai-in-business .aib-jovian__prompt {
  margin: 21px 0 0;
  font-family: var(--font-mono-label);
  font-weight: 400;
  font-size: 14px;
  line-height: 25px;
  color: rgba(28, 28, 28, .9);
}

body.page-template-page-ai-in-business .aib-jovian__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

body.page-template-page-ai-in-business .aib-jovian__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 5px;
  font-family: var(--font-mono-label);
  font-weight: 500;
  font-size: 13px;
  line-height: normal;
  letter-spacing: .65px;
  color: #333;
}

body.page-template-page-ai-in-business .aib-jovian__chip img {
  flex: none;
}

/* Figma 99:3608 — a 22px hairline separating the four industry chips from
   the "I have Custom Requirements" link. */
body.page-template-page-ai-in-business .aib-jovian__chips-sep {
  width: 1px;
  height: 22px;
  background: rgba(0, 0, 0, .2);
}

/* Figma 99:3602 — this one is a plain underlined link, not a bordered chip. */
body.page-template-page-ai-in-business .aib-jovian__chip--link {
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid #333;
  border-radius: 0;
}

body.page-template-page-ai-in-business .aib-jovian__composer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 10px 26px;
  background: #fff;
  border-top: 1px solid rgba(0, 0, 0, .1);
}

body.page-template-page-ai-in-business .aib-jovian__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  font-family: var(--font-mono-label);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .65px;
  color: #333;
}

body.page-template-page-ai-in-business .aib-jovian__input::placeholder {
  color: #868686;
}

body.page-template-page-ai-in-business .aib-jovian__send {
  flex: none;
  width: 38px;
  height: 38px;
  padding: 0;
  line-height: 0;
}

/* ==========================================================================
   6. IMPACT CALCULATOR — Figma 99:3993 (y 3961..5050, white)
   120 top pad + 849 content + 120 bottom pad.
   ========================================================================== */
body.page-template-page-ai-in-business .aib-calc {
  background: #fff;
  padding: 120px 0;
}

body.page-template-page-ai-in-business .aib-calc__head {
  display: flex;
  align-items: center;
  gap: 77px;
}

body.page-template-page-ai-in-business .aib-calc__intro {
  flex: none;
  width: 900px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Figma 99:4000 is Gelasio MEDIUM here (500), not the Regular used by the
   other serif headings on this page. */
body.page-template-page-ai-in-business .aib-calc__heading {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 74.88px;
  line-height: 77.875px;
  letter-spacing: -3.744px;
  color: #171717;
}

body.page-template-page-ai-in-business .aib-calc__heading span {
  color: #9a60fa;
}

body.page-template-page-ai-in-business .aib-calc__lede {
  margin: -6px 0 0; /* 16px gap in Figma 99:3999 against the 22px column gap */
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 17.28px;
  line-height: 30.24px;
  color: rgba(23, 23, 23, .7);
}

/* Capacity-rate control — Figma 99:4002. */
body.page-template-page-ai-in-business .aib-calc__rate {
  flex: none;
  padding: 24px;
  background: rgba(255, 255, 255, .5);
  border: 1px solid #d8d1d9;
  border-radius: 12px;
}

body.page-template-page-ai-in-business .aib-calc__rate-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 414px;
  max-width: 100%;
  margin-bottom: 5px;
}

body.page-template-page-ai-in-business .aib-calc__rate-kicker {
  display: block;
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 10px;
  line-height: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(0, 0, 0, .5);
}

body.page-template-page-ai-in-business .aib-calc__rate-title {
  display: block;
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  color: #171717;
  cursor: pointer;
}

body.page-template-page-ai-in-business .aib-calc__rate-value {
  flex: none;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 24px;
  line-height: normal;
  letter-spacing: -1.3824px;
  text-align: right;
  color: #9a60fa;
}

/* The filled portion of a range input cannot be styled cross-browser, so the
   fill is painted as a background gradient sized from --aib-slider-pct, which
   js/ai-in-business.js keeps in sync. Same technique as
   js/ai-automation-agency.js. */
body.page-template-page-ai-in-business .aib-calc__slider {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 414px;
  max-width: 100%;
  height: 6px;
  margin: 0;
  border-radius: 30px;
  background:
    linear-gradient(#9a60fa, #9a60fa) 0 / var(--aib-slider-pct, 28.57%) 100% no-repeat,
    rgba(154, 96, 250, .18);
  cursor: pointer;
}

body.page-template-page-ai-in-business .aib-calc__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 13.85px;
  height: 13.85px;
  border: 0;
  border-radius: 50%;
  background: #9a60fa;
}

body.page-template-page-ai-in-business .aib-calc__slider::-moz-range-thumb {
  width: 13.85px;
  height: 13.85px;
  border: 0;
  border-radius: 50%;
  background: #9a60fa;
}

/* Tab bar — Figma 99:4015. */
body.page-template-page-ai-in-business .aib-calc__tabs {
  display: inline-flex;
  gap: 18px;
  margin: 48px 0 0;
  padding: 6px 8px;
  background: #fff;
  border: .824px solid #f0e7fe;
  border-radius: 10px;
}

body.page-template-page-ai-in-business .aib-calc__tab {
  width: 96px;
  height: 44px;
  padding: 0 16px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 16px;
  line-height: normal;
  letter-spacing: -1.1384px;
  color: #4f5666;
}

body.page-template-page-ai-in-business .aib-calc__tab.is-active {
  background: #ece7f5;
  font-weight: 500;
  color: #6c4eaa;
}

body.page-template-page-ai-in-business .aib-calc__table {
  margin-top: 24px; /* Figma 99:4026 sits 82px below the tab bar's 58px box */
}

body.page-template-page-ai-in-business .aib-calc__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 30px 40px;
  background: #fff;
  border: 1px solid rgba(154, 96, 250, .15);
}

body.page-template-page-ai-in-business .aib-calc__row + .aib-calc__row {
  margin-top: -1px; /* collapse the shared 1px border between rows */
}

body.page-template-page-ai-in-business .aib-calc__row:first-child {
  border-radius: 20px 20px 0 0;
}

body.page-template-page-ai-in-business .aib-calc__row:last-child {
  border-radius: 0 0 20px 20px;
}

body.page-template-page-ai-in-business .aib-calc__row-main {
  display: flex;
  align-items: center;
  gap: 79px;
}

body.page-template-page-ai-in-business .aib-calc__row-id {
  flex: none;
  width: 240px;
  display: flex;
  align-items: center;
  gap: 16px;
}

body.page-template-page-ai-in-business .aib-calc__row-icon {
  flex: none;
  width: 45.375px;
  height: 45.375px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ebdffe;
  border-radius: 7.992px;
}

body.page-template-page-ai-in-business .aib-calc__row-title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 24px;
  line-height: normal;
  letter-spacing: -1.3824px;
  color: #171717;
}

body.page-template-page-ai-in-business .aib-calc__row-compare {
  flex: none;
  width: 428px;
  display: flex;
  align-items: center;
  gap: 20px;
}

body.page-template-page-ai-in-business .aib-calc__col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

body.page-template-page-ai-in-business .aib-calc__col-arrow {
  flex: none;
}

body.page-template-page-ai-in-business .aib-calc__col-kicker {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 10px;
  line-height: 13px;
  letter-spacing: 1.86px;
  text-transform: uppercase;
  color: #9a60fb;
}

body.page-template-page-ai-in-business .aib-calc__col-text {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(23, 23, 23, .7);
}

body.page-template-page-ai-in-business .aib-calc__row-bars {
  flex: none;
  width: 303px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

body.page-template-page-ai-in-business .aib-calc__bar {
  display: flex;
  align-items: center;
  gap: 14px;
}

body.page-template-page-ai-in-business .aib-calc__bar-label {
  flex: none;
  width: 71px;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 14px;
  color: rgba(23, 23, 23, .7);
}

body.page-template-page-ai-in-business .aib-calc__track {
  position: relative;
  flex: none;
  width: 156px;
  height: 8px;
  border-radius: 30px;
  background: rgba(217, 217, 217, .6);
}

body.page-template-page-ai-in-business .aib-calc__track--rec {
  background: rgba(154, 96, 250, .1);
}

body.page-template-page-ai-in-business .aib-calc__fill {
  position: absolute;
  inset: 0 auto 0 0;
  height: 8px;
  border-radius: 30px;
  background: #9a60fa;
}

body.page-template-page-ai-in-business .aib-calc__bar-hrs {
  flex: none;
  width: 48px;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 14px;
  color: rgba(23, 23, 23, .7);
}

body.page-template-page-ai-in-business .aib-calc__bar-hrs--rec {
  color: #9a60fa;
}

body.page-template-page-ai-in-business .aib-calc__row-value {
  flex: none;
  width: 108px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 11px;
  text-align: right;
}

body.page-template-page-ai-in-business .aib-calc__money {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 24px;
  line-height: normal;
  letter-spacing: -1.3824px;
  color: #9a60fa;
}

/* Figma 99:4063 sits in a 108px column and still sets this on one line — at
   14px Inter "Capacity / Week" measures ~103px, so it only just fits and wraps
   in the browser without this. Wrapping it added 16px to every row, i.e. 64px
   to the section. */
body.page-template-page-ai-in-business .aib-calc__money-label {
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 14px;
  color: rgba(23, 23, 23, .7);
  white-space: nowrap;
}

/* ==========================================================================
   7. WHY TBI — Figma 99:3146 (band y 5050..5826)
   120 top pad + 656 content + 0 bottom pad: the value row's bottom border is
   flush with the band's end in the frame.
   ========================================================================== */
body.page-template-page-ai-in-business .aib-why {
  padding: 120px 0 0;
}

body.page-template-page-ai-in-business .aib-why__head {
  display: flex;
  align-items: center;
  gap: 64px;
}

body.page-template-page-ai-in-business .aib-why__intro {
  flex: 1 1 0;
  min-width: 0;
}

body.page-template-page-ai-in-business .aib-why__heading {
  margin: 24px 0 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 76px;
  line-height: 84px;
  letter-spacing: -4.752px;
  color: #ecebea;
}

body.page-template-page-ai-in-business .aib-why__heading span {
  color: #9a60fa;
}

body.page-template-page-ai-in-business .aib-why__copy {
  flex: none;
  width: 800px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

body.page-template-page-ai-in-business .aib-why__lede {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 600;
  font-size: 20px;
  line-height: 33px;
  color: #ecebea;
}

body.page-template-page-ai-in-business .aib-why__body {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 20px;
  line-height: 33px;
  color: #b9b5c0;
}

body.page-template-page-ai-in-business .aib-why__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 68px;
}

body.page-template-page-ai-in-business .aib-why__stat {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-height: 151.484px;
  padding: 32px;
  border-top: 1px solid #261f4e;
  border-bottom: 1px solid #261f4e;
  box-sizing: border-box;
}

body.page-template-page-ai-in-business .aib-why__stat + .aib-why__stat {
  border-left: 1px solid #261f4e;
}

/* Figma 99:3159 / 99:3163 / 99:3174 specify Playfair Display here, not the
   Gelasio used by every other serif numeral on this page. Loaded per-template
   in functions.php, exactly as page-ai-automation-agency.php does for its own
   Why-TBI stats. */
/* Figma 99:3158 makes this cell exactly 151.484 tall: 32px padding each side
   leaves 87.484 for a 32px-gap column, which only works because both text
   nodes are text-box-trimmed to their cap box (a 57.6px Playfair numeral
   trims to ~41px, the 21.7px label to ~15px). text-box-trim has no effect on
   a flex container, so these two stay block-level and their inline extras
   (the stars, the Clutch logo) ride the baseline instead of being flex
   children — laying them out with flex rendered the cell 176px tall, 24.5px
   over, which is where this section's whole overshoot came from. */
body.page-template-page-ai-in-business .aib-why__stat-num {
  display: block;
  font-family: "Playfair Display", var(--font-serif);
  font-weight: 400;
  font-size: 57.6px;
  line-height: 57.6px;
  color: #ecebea;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

body.page-template-page-ai-in-business .aib-why__stars {
  display: inline;
  margin-left: 6px;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 2px;
  color: #ff3434;
}

body.page-template-page-ai-in-business .aib-why__stat-label {
  display: block;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 14px;
  line-height: 21.7px;
  font-feature-settings: "liga" 0;
  color: #aaa5b3;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

body.page-template-page-ai-in-business .aib-why__clutch {
  display: inline-block;
  margin-left: 6px;
  vertical-align: baseline;
}

body.page-template-page-ai-in-business .aib-why__values {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

body.page-template-page-ai-in-business .aib-why__value {
  min-height: 146px;
  padding: 30px 24px 28px;
  box-sizing: border-box;
}

body.page-template-page-ai-in-business .aib-why__value:not(:last-child) {
  border-right: 1px solid #261f4e;
}

body.page-template-page-ai-in-business .aib-why__value-bar {
  display: block;
  width: 40px;
  height: 3px;
  margin-bottom: 18px;
  background: #ad7af5;
}

body.page-template-page-ai-in-business .aib-why__value-title {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 23px;
  line-height: 27.6px;
  color: #ecebea;
}

/* ==========================================================================
   8. TECHNOLOGY MARQUEE — Figma 99:3622 (band y 5826..6470, white)
   Heading block y 5948..6113, pill band y 6151..6385 (three rows, 41px pills,
   69px row pitch => 28px gap). All measured off the 1:1 export.
   ========================================================================== */
/* Figma 99:3627, the pill band node, is 234 tall (y 6151..6385) but its three
   41px rows only ink y 6172..6351 — i.e. the node carries 21px of slack above
   the first row and 34px below the last. Measuring the gaps off the ROWS
   instead of off the node made this section 55px short, which then dragged
   the whole Business-Opportunities band up with it. Gaps below are therefore
   measured ink-to-ink: heading ink ends 6113, first row inks 6172 (59), last
   row inks out 6351, band ends 6470 (119). */
body.page-template-page-ai-in-business .aib-tech {
  background: #fff;
  padding: 120px 0 119px;
}

body.page-template-page-ai-in-business .aib-tech__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

/* Figma 99:3626 — this heading is Inter Bold, not the Gelasio used by the
   other section headings. */
body.page-template-page-ai-in-business .aib-tech__heading {
  margin: 0;
  max-width: 932px;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 76px;
  line-height: 78px;
  letter-spacing: -3.46px;
  color: #171717;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

body.page-template-page-ai-in-business .aib-tech__band {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 59px;
  /* Edge fade — exact stops read off Figma's own mask (marquee-mask.svg):
     transparent at 0, opaque 4%..96%, transparent at 100%. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}

body.page-template-page-ai-in-business .aib-tech__row {
  overflow: hidden;
}

body.page-template-page-ai-in-business .aib-tech__track {
  display: flex;
  align-items: center;
  gap: 20px;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: aib-marquee 46s linear infinite;
}

/* Figma offsets rows 1 and 3 by +22.54px and row 2 by -7.46px, i.e. row 2
   runs the other way. */
body.page-template-page-ai-in-business .aib-tech__row--2 .aib-tech__track {
  animation-direction: reverse;
}

body.page-template-page-ai-in-business .aib-tech__row--3 .aib-tech__track {
  animation-duration: 54s;
}

@keyframes aib-marquee {
  from { transform: translateX(0); }
  /* Each track holds the 10 pills twice, so half a track is one seamless
     loop. The 10px offset covers the trailing gap of the first set. */
  to   { transform: translateX(calc(-50% - 10px)); }
}

@media (prefers-reduced-motion: reduce) {
  body.page-template-page-ai-in-business .aib-tech__track {
    animation: none;
  }

  body.page-template-page-ai-in-business .aib-tech__row {
    overflow-x: auto;
  }
}

/* Figma's pills are py-14 around 16/24 text but are marked text-box-trim, so
   they measure 41px tall in the export, not 54. Set explicitly. */
body.page-template-page-ai-in-business .aib-tech__pill {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 41px;
  padding: 0 16px;
  background: rgba(245, 243, 248, .16);
  border: 1px solid #dadada;
  border-radius: 12px;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #171717;
  white-space: nowrap;
}

body.page-template-page-ai-in-business .aib-tech__pill img {
  flex: none;
  width: 12px;
  height: 12px;
}

/* ==========================================================================
   9. BUSINESS OPPORTUNITIES — Figma 99:3201 (band y 6470..7365, #FAF9FD)
   ========================================================================== */
body.page-template-page-ai-in-business .aib-opps {
  background: #faf9fd;
  padding: 120px 0;
  text-align: center;
}

body.page-template-page-ai-in-business .aib-opps__heading {
  margin: 20px 0 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 76px;
  line-height: 78.3px;
  letter-spacing: -3.456px;
  color: #171717;
}

body.page-template-page-ai-in-business .aib-opps__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

body.page-template-page-ai-in-business .aib-opps__card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 240px;
  padding: 20px 20px 32px;
  background: #fff;
  border: 1px solid rgba(154, 96, 251, .2);
  border-radius: 12px;
  box-sizing: border-box;
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, .02));
}

body.page-template-page-ai-in-business .aib-opps__icon {
  flex: none;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(238, 227, 251, .6);
  border-radius: 6px;
}

body.page-template-page-ai-in-business .aib-opps__title {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 22px;
  line-height: 28px;
  color: #171717;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* Figma 99:3214 sets a 240px measure inside a 305px content box — without it
   the body reflows from three lines to two and every line below the title
   lands ~19px high. */
body.page-template-page-ai-in-business .aib-opps__body {
  margin: 0;
  max-width: 240px;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  color: #171717;
  opacity: .72;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* Figma 99:3257 — the 8th cell is a dark CTA card at a fixed 345px, with its
   own #020010 + blurred purple ellipse background (bo-cta-card-bg.svg). */
/* Figma 99:3257 is a fixed 240 tall like every other cell in this grid, which
   only works because all three of its text nodes are text-box-trimmed and its
   internal gaps are 24 / 20 / 24 — NOT a uniform 24. Running a flat 24px flex
   gap with untrimmed text made this one cell 277 tall, and because grid items
   stretch, it dragged the whole second row 39px with it. */
body.page-template-page-ai-in-business .aib-opps__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 240px;
  padding: 24px 20px;
  border-radius: 12px;
  background: #020010 url("../assets/images/ai-in-business/bo-cta-card-bg.svg") no-repeat center / cover;
  box-sizing: border-box;
}

body.page-template-page-ai-in-business .aib-opps__cta-kicker {
  margin: 0 0 24px;
  font-family: var(--font-base);
  font-weight: 600;
  font-size: 13px;
  line-height: 28px;
  color: #cab5ff;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

body.page-template-page-ai-in-business .aib-opps__cta-title {
  margin: 0 0 20px;
  font-family: var(--font-base);
  font-weight: 800;
  font-size: 24px;
  line-height: 31.3px;
  color: #fff;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

body.page-template-page-ai-in-business .aib-opps__cta-body {
  margin: 0 0 24px;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  color: #fff;
  opacity: .72;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

body.page-template-page-ai-in-business .aib-opps__cta-btn {
  width: 100%;
  margin-top: auto;
  padding: 0 24px;
  font-family: var(--font-mono-label);
}

/* ==========================================================================
   10. FAQ — Figma 99:3273 (band y 7365..8552)
   Overrides content.css's sitewide unscoped .faq__* rules; the accordion
   behaviour itself is the sitewide js/faq-accordion.js.
   ========================================================================== */
body.page-template-page-ai-in-business .aib-faq {
  position: relative;
  padding: 120px 0;
  background: #020010;
  isolation: isolate;
}

/* Figma 99:3274 — an r269 #885FF2 -> #4F378C radial fill at 20% opacity under
   an 87px blur, centred at x=-31.3 y=546 of the 1520x1187 band. Shipped as
   Figma's own export at its own scale rather than re-derived as a CSS
   gradient; it is anchored left and the rest of the band is flat #020010, so
   it needs no stretching. */
body.page-template-page-ai-in-business .aib-faq::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../assets/images/ai-in-business/faq-glow.svg") no-repeat left center;
  background-size: 1520px 1187px;
  pointer-events: none;
}

body.page-template-page-ai-in-business .aib-faq__heading {
  margin: 0 0 40px;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 64px;
  line-height: 64px;
  letter-spacing: -3.46px;
  text-align: center;
  color: #f7f7f8;
}

body.page-template-page-ai-in-business .aib-faq__list {
  max-width: 900px;
  margin: 0 auto;
}

body.page-template-page-ai-in-business .aib-faq__list .faq__item {
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}

body.page-template-page-ai-in-business .aib-faq__list .faq__question {
  margin: 0;
}

body.page-template-page-ai-in-business .aib-faq__list .faq__trigger {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 23px 0;
  text-align: left;
}

/* Figma …515:21618 makes the question box a fixed 26px, so a collapsed row is
   23 + 26 + 23 + 1px rule = 73px. Letting the 17px text set its own ~20.6px
   box gave 67px, and that 6px shortfall compounded across the eight collapsed
   rows into ~48px of drift down the accordion. */
body.page-template-page-ai-in-business .aib-faq__list .faq__label {
  display: block;
  min-height: 26px;
  font-family: var(--font-base);
  font-weight: 600;
  font-size: 17px;
  line-height: normal;
  color: #fff;
}

/* Figma …515:21620 draws a DM Sans SemiBold 20px "+" / "-" TEXT glyph, not an
   icon asset. content.css builds its sitewide version out of two absolutely
   positioned bars (.faq__icon::before horizontal, ::after vertical, the
   vertical one rotating away when open) — leaving those in place stacked a
   painted bar behind this glyph, which rendered as a doubled/struck symbol.
   Both pseudo-elements are therefore fully reset here, not just overdrawn. */
body.page-template-page-ai-in-business .aib-faq__list .faq__icon {
  position: static;
  flex: none;
  width: auto;
  height: auto;
  font-family: var(--font-mono-label);
  font-weight: 600;
  font-size: 20px;
  line-height: 1;
  color: #bd9cff;
}

body.page-template-page-ai-in-business .aib-faq__list .faq__icon::before {
  content: "+";
  position: static;
  width: auto;
  height: auto;
  background: none;
  transform: none;
}

body.page-template-page-ai-in-business .aib-faq__list .faq__icon::after {
  content: none;
}

body.page-template-page-ai-in-business .aib-faq__list .faq__trigger[aria-expanded="true"] .faq__icon::before {
  content: "\2212"; /* U+2212 MINUS SIGN — the design's dash is full-width, not a hyphen */
}

body.page-template-page-ai-in-business .aib-faq__list .faq__answer {
  padding: 0 0 23px;
}

/* Figma …515:21622 is a 900px text node whose lines are broken early, at
   ~768px of measure. Reproduced as a max-width rather than as the literal
   <br>s Figma's codegen emits: hard breaks in body copy land in the wrong
   place at every width this design has no frame for. */
body.page-template-page-ai-in-business .aib-faq__list .faq__answer p {
  margin: 0;
  /* content.css's own .faq__answer p carries padding-bottom: 24px. Resetting
     only the margin left that in place, which padded every paragraph box 24px
     past its last line — 48px across the two paragraphs of the one open
     answer, and the reason this section measured right only while the
     collapsed rows were separately 6px short. */
  padding: 0;
  max-width: 790px;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  color: #aab1c0;
}

body.page-template-page-ai-in-business .aib-faq__list .faq__answer p + p {
  margin-top: 28px;
}

body.page-template-page-ai-in-business .aib-faq__placeholder {
  color: #8d93a1;
}

/* ==========================================================================
   11. FINAL CTA — Figma 99:3280 (band y 8552..9303, white)
   Card measured at 1265 x 511, x=128, y=8672, radius 10px.
   ========================================================================== */
body.page-template-page-ai-in-business .aib-final {
  background: #fff;
  padding: 120px 128px;
}

body.page-template-page-ai-in-business .aib-final__card {
  position: relative;
  max-width: 1265px;
  margin: 0 auto;
  min-height: 511px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  overflow: hidden;
  background: #060014;
}

/* Figma 99:3285 places the art at 1343x549 offset (-34, -27) behind a
   1265x511 mask — i.e. it is deliberately larger than the card and anchored
   up and to the left, which is what puts the paper plane where it sits.
   Filling the card box instead (inset: 0 + object-fit: cover) re-cropped the
   plane noticeably. Expressed against the card so it scales. */
body.page-template-page-ai-in-business .aib-final__art {
  position: absolute;
  left: -2.6877%;  /* -34 / 1265 */
  top: -5.2838%;   /* -27 / 511  */
  width: 106.166%; /* 1343 / 1265 */
  height: 107.4364%; /* 549 / 511 */
  z-index: 0;
}

body.page-template-page-ai-in-business .aib-final__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

body.page-template-page-ai-in-business .aib-final__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 40px;
  text-align: center;
  box-sizing: border-box;
}

/* Figma 99:3293 sits 35px right of the card centre while the heading, body
   and button below it are all centred — a positioning slip in the source,
   not a design intent. Centred here; recorded in the digest. */
body.page-template-page-ai-in-business .aib-final__eyebrow {
  margin: 0 0 22px;
}

body.page-template-page-ai-in-business .aib-final__heading {
  margin: 0;
  max-width: 702px;
  font-family: var(--font-base);
  font-weight: 900;
  font-size: 63px;
  line-height: 71px;
  color: #fff;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

body.page-template-page-ai-in-business .aib-final__body {
  margin: 24px 0 0;
  max-width: 827px;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  color: rgba(255, 255, 255, .8);
}

body.page-template-page-ai-in-business .aib-final__btn {
  margin-top: 24px;
  padding: 0 32px;
  font-size: 16px;
}

/* ==========================================================================
   RESPONSIVE — INTERPRETED
   Node 99:3118 is the only frame in the file: there is no tablet or mobile
   frame anywhere in it, so everything below is this build's own
   interpretation and is NOT Figma-verified.
   ========================================================================== */

/* ---- <= 1439px: the 1440 content box stops fitting; relax the fixed
        column widths that were measured against it. ---- */
@media (max-width: 1439px) {
  body.page-template-page-ai-in-business .aib-impact__row {
    gap: 64px;
  }

  body.page-template-page-ai-in-business .aib-impact__stats {
    flex: 1 1 auto;
    gap: 24px;
  }

  body.page-template-page-ai-in-business .aib-impact__stat {
    flex: 1 1 0;
    width: auto;
  }

  body.page-template-page-ai-in-business .aib-problems__row,
  body.page-template-page-ai-in-business .aib-why__head,
  body.page-template-page-ai-in-business .aib-calc__head {
    gap: 48px;
  }

  body.page-template-page-ai-in-business .aib-calc__intro,
  body.page-template-page-ai-in-business .aib-why__copy {
    flex: 1 1 auto;
    width: auto;
  }

  body.page-template-page-ai-in-business .aib-calc__rate {
    flex: none;
  }

  body.page-template-page-ai-in-business .aib-calc__row {
    padding: 30px 24px;
  }

  body.page-template-page-ai-in-business .aib-calc__row-main {
    gap: 32px;
  }

  body.page-template-page-ai-in-business .aib-calc__row-compare {
    width: auto;
    flex: 1 1 auto;
  }

  body.page-template-page-ai-in-business .aib-final {
    padding: 120px 40px;
  }
}

/* ---- <= 1279px ---- */
@media (max-width: 1279px) {
  body.page-template-page-ai-in-business .aib-hero__heading {
    font-size: 54px;
    line-height: 58px;
  }

  body.page-template-page-ai-in-business .aib-problems__heading,
  body.page-template-page-ai-in-business .aib-work__heading,
  body.page-template-page-ai-in-business .aib-jovian__heading,
  body.page-template-page-ai-in-business .aib-opps__heading,
  body.page-template-page-ai-in-business .aib-tech__heading {
    font-size: 58px;
    line-height: 62px;
    letter-spacing: -2.4px;
  }

  body.page-template-page-ai-in-business .aib-calc__heading {
    font-size: 56px;
    line-height: 60px;
    letter-spacing: -2.4px;
  }

  body.page-template-page-ai-in-business .aib-why__heading {
    font-size: 58px;
    line-height: 64px;
    letter-spacing: -2.4px;
  }

  body.page-template-page-ai-in-business .aib-faq__heading,
  body.page-template-page-ai-in-business .aib-final__heading {
    font-size: 48px;
    line-height: 54px;
    letter-spacing: -1.8px;
  }

  body.page-template-page-ai-in-business .aib-problems__intro {
    width: 400px;
  }

  body.page-template-page-ai-in-business .aib-work__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.page-template-page-ai-in-business .aib-opps__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.page-template-page-ai-in-business .aib-opps__cta {
    min-height: 240px;
  }

  body.page-template-page-ai-in-business .aib-calc__row {
    flex-wrap: wrap;
    gap: 20px;
  }

  body.page-template-page-ai-in-business .aib-calc__row-main {
    flex: 1 1 100%;
  }

  body.page-template-page-ai-in-business .aib-calc__row-bars {
    flex: 1 1 auto;
  }
}

/* ---- <= 1023px: two-column bands become one column. ---- */
@media (max-width: 1023px) {
  body.page-template-page-ai-in-business .aib-hero {
    min-height: 0;
  }

  body.page-template-page-ai-in-business .aib-hero__inner {
    padding-top: 120px;
    padding-bottom: 120px;
  }

  body.page-template-page-ai-in-business .aib-hero__bg {
    width: 100%;
    height: 100%;
    top: 0;
  }

  body.page-template-page-ai-in-business .aib-impact__row,
  body.page-template-page-ai-in-business .aib-problems__row,
  body.page-template-page-ai-in-business .aib-why__head,
  body.page-template-page-ai-in-business .aib-calc__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
  }

  body.page-template-page-ai-in-business .aib-impact__intro,
  body.page-template-page-ai-in-business .aib-problems__intro {
    width: 100%;
  }

  body.page-template-page-ai-in-business .aib-impact__stats {
    width: 100%;
  }

  body.page-template-page-ai-in-business .aib-problems__heading-a,
  body.page-template-page-ai-in-business .aib-problems__heading-b {
    width: auto;
  }

  body.page-template-page-ai-in-business .aib-problems__lede,
  body.page-template-page-ai-in-business .aib-why__copy {
    max-width: none;
  }

  body.page-template-page-ai-in-business .aib-calc__rate,
  body.page-template-page-ai-in-business .aib-calc__rate-top,
  body.page-template-page-ai-in-business .aib-calc__slider {
    width: 100%;
  }

  body.page-template-page-ai-in-business .aib-calc__rate {
    box-sizing: border-box;
  }

  body.page-template-page-ai-in-business .aib-calc__tabs {
    display: flex;
    width: 100%;
    gap: 8px;
    overflow-x: auto;
  }

  body.page-template-page-ai-in-business .aib-calc__tab {
    flex: 1 0 auto;
  }

  body.page-template-page-ai-in-business .aib-calc__row-main {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  body.page-template-page-ai-in-business .aib-calc__row-id,
  body.page-template-page-ai-in-business .aib-calc__row-compare {
    width: 100%;
  }

  body.page-template-page-ai-in-business .aib-calc__row-value {
    width: 100%;
    align-items: flex-start;
    text-align: left;
  }

  body.page-template-page-ai-in-business .aib-why__stats {
    grid-template-columns: 1fr;
  }

  body.page-template-page-ai-in-business .aib-why__stat + .aib-why__stat {
    border-left: 0;
    border-top: 0;
  }

  body.page-template-page-ai-in-business .aib-why__values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.page-template-page-ai-in-business .aib-why__value:nth-child(2n) {
    border-right: 0;
  }

  body.page-template-page-ai-in-business .aib-why__value:not(:nth-last-child(-n+2)) {
    border-bottom: 1px solid #261f4e;
  }

  body.page-template-page-ai-in-business .aib-midcta {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }

  body.page-template-page-ai-in-business .aib-midcta__btn {
    width: 100%;
  }

  body.page-template-page-ai-in-business .aib-final {
    padding: 80px 20px;
  }

  body.page-template-page-ai-in-business .aib-final__card {
    min-height: 0;
  }

  body.page-template-page-ai-in-business .aib-final__inner {
    padding: 64px 32px;
  }
}

/* ---- <= 767px ---- */
@media (max-width: 767px) {
  body.page-template-page-ai-in-business .aib-problems,
  body.page-template-page-ai-in-business .aib-jovian,
  body.page-template-page-ai-in-business .aib-calc,
  body.page-template-page-ai-in-business .aib-opps,
  body.page-template-page-ai-in-business .aib-faq {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  body.page-template-page-ai-in-business .aib-work {
    padding-bottom: 72px;
  }

  body.page-template-page-ai-in-business .aib-why {
    padding-top: 72px;
  }

  body.page-template-page-ai-in-business .aib-tech {
    padding: 72px 0 56px;
  }

  body.page-template-page-ai-in-business .aib-hero__heading {
    font-size: 40px;
    line-height: 46px;
  }

  body.page-template-page-ai-in-business .aib-hero__lede {
    font-size: 20px;
    line-height: 32px;
  }

  body.page-template-page-ai-in-business .aib-problems__heading,
  body.page-template-page-ai-in-business .aib-work__heading,
  body.page-template-page-ai-in-business .aib-jovian__heading,
  body.page-template-page-ai-in-business .aib-opps__heading,
  body.page-template-page-ai-in-business .aib-tech__heading,
  body.page-template-page-ai-in-business .aib-why__heading,
  body.page-template-page-ai-in-business .aib-calc__heading {
    font-size: 40px;
    line-height: 46px;
    letter-spacing: -1.4px;
  }

  body.page-template-page-ai-in-business .aib-faq__heading,
  body.page-template-page-ai-in-business .aib-final__heading {
    font-size: 34px;
    line-height: 40px;
    letter-spacing: -1px;
  }

  body.page-template-page-ai-in-business .aib-midcta__title {
    font-size: 26px;
    letter-spacing: -1px;
  }

  body.page-template-page-ai-in-business .aib-impact__stats {
    flex-direction: column;
    gap: 24px;
  }

  body.page-template-page-ai-in-business .aib-impact__num {
    font-size: 44px;
    line-height: 44px;
  }

  body.page-template-page-ai-in-business .aib-problems__grid,
  body.page-template-page-ai-in-business .aib-work__grid,
  body.page-template-page-ai-in-business .aib-opps__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.page-template-page-ai-in-business .aib-why__values {
    grid-template-columns: minmax(0, 1fr);
  }

  body.page-template-page-ai-in-business .aib-why__value {
    border-right: 0 !important;
    border-bottom: 1px solid #261f4e;
  }

  body.page-template-page-ai-in-business .aib-why__value:last-child {
    border-bottom: 0;
  }

  body.page-template-page-ai-in-business .aib-why__stat-num {
    font-size: 44px;
    line-height: 44px;
  }

  body.page-template-page-ai-in-business .aib-jovian__body {
    padding: 20px 14px 22px;
  }

  body.page-template-page-ai-in-business .aib-jovian__composer {
    padding-left: 14px;
  }

  body.page-template-page-ai-in-business .aib-jovian__chips-sep {
    display: none;
  }

  body.page-template-page-ai-in-business .aib-calc__row {
    padding: 24px 18px;
  }

  body.page-template-page-ai-in-business .aib-calc__row-compare {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  body.page-template-page-ai-in-business .aib-calc__col-arrow {
    transform: rotate(90deg);
  }

  body.page-template-page-ai-in-business .aib-calc__bar-label {
    width: 64px;
  }

  body.page-template-page-ai-in-business .aib-calc__track {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

  body.page-template-page-ai-in-business .aib-final__inner {
    padding: 48px 20px;
  }
}

/* ---- <= 599px ---- */
@media (max-width: 599px) {
  body.page-template-page-ai-in-business .aib-hero__heading {
    font-size: 34px;
    line-height: 40px;
  }

  body.page-template-page-ai-in-business .aib-problems__heading,
  body.page-template-page-ai-in-business .aib-work__heading,
  body.page-template-page-ai-in-business .aib-jovian__heading,
  body.page-template-page-ai-in-business .aib-opps__heading,
  body.page-template-page-ai-in-business .aib-tech__heading,
  body.page-template-page-ai-in-business .aib-why__heading,
  body.page-template-page-ai-in-business .aib-calc__heading {
    font-size: 32px;
    line-height: 38px;
  }

  body.page-template-page-ai-in-business .aib-faq__heading,
  body.page-template-page-ai-in-business .aib-final__heading {
    font-size: 28px;
    line-height: 34px;
  }

  body.page-template-page-ai-in-business .aib-problems__card,
  body.page-template-page-ai-in-business .aib-work__card {
    padding: 24px;
  }

  body.page-template-page-ai-in-business .aib-midcta {
    padding: 24px;
  }

  body.page-template-page-ai-in-business .aib-btn {
    width: 100%;
    min-width: 0;
    padding: 0 16px;
    font-size: 14px;
  }

  body.page-template-page-ai-in-business .aib-calc__bar {
    flex-wrap: wrap;
    gap: 8px 12px;
  }

  body.page-template-page-ai-in-business .aib-calc__track {
    order: 3;
    flex: 1 1 100%;
  }

  body.page-template-page-ai-in-business .aib-faq__list .faq__trigger {
    gap: 14px;
  }

  body.page-template-page-ai-in-business .aib-faq__list .faq__label {
    font-size: 16px;
  }
}