/* AI kit (AIA-KIT): the shared look of every AI service page, on top of ecommerce.css and ai.css. Scoped under .aik
   (the shell's wrapper), so no other page changes. Section parts are appended below, one block per section, each
   headed "section: <key>". No inline styles or inline SVG in the views (UD-057, UD-064). */

.aik { --aik-ink: #0B1F16; --aik-green: #00B26B; --aik-green-d: #00744A; --aik-green-l: #E6F7EF; --aik-card: #fff;
  --aik-rule: rgba(0, 0, 0, .10); --aik-muted: rgba(0, 0, 0, .62); --aik-radius: 16px; }
.aik .aik-sec { padding: var(--ec-sec-y, 64px) 0; }
.aik .aik-sec--alt { background: var(--ec-alt, #F4F8F6); }
.aik .aik-sec--dark { background: #050B08; color: #fff; }
.aik .aik-h2 { text-wrap: balance; }
.aik .aik-answer { max-width: 760px; }
.aik .aik-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* The status label (UD-068): "In production" or "Pilot-first" */
.aik .aik-status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1.2; background: var(--aik-green-l); color: var(--aik-green-d); }
.aik .aik-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--aik-green); }
.aik .aik-status--pilot { background: #FFF4E0; color: #8A5300; }
.aik .aik-status--pilot::before { background: #E59A00; }

/* ---- section part: a-hero (merged from the parallel build) ---- */
/* Builder A: ai-kit.css's opening comment closes early (it quotes a comment marker), which swallows its .aik token
   rule; until that is fixed, the tokens are set again here for these sections only (same values). */
.aik .aik-hero, .aik .aik-proof { --aik-ink: #0B1F16; --aik-green: #00B26B; --aik-green-d: #00744A; --aik-green-l: #E6F7EF;
  --aik-rule: rgba(0, 0, 0, .10); --aik-muted: rgba(0, 0, 0, .62); }

/* section: hero (builder A) — dark hero on the hub's ec-hero kit, with two phone screens instead of the photo */
.aik .aik-hero { position: relative; overflow: hidden; color: #fff; }
.aik .aik-hero > .aik-hero__in { position: relative; padding-top: calc(72px + 28px); padding-bottom: 36px; }
/* the hero entrance is ecommerce.css's (title, lead, actions rise in turn); the ratings and the drawing follow below */

/* breadcrumb */
.aik .aik-hero-crumbs { margin: 0 0 18px; }
.aik .aik-hero-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.72); }
.aik .aik-hero-crumbs li { display: inline-flex; align-items: center; }
.aik .aik-hero-crumbs a { display: inline-flex; align-items: center; min-height: 24px; }   /* WCAG 2.2 target size */
.aik .aik-hero-crumbs li + li::before { content: "/"; margin: 0 8px; color: rgba(255,255,255,.4); }
.aik .aik-hero-crumbs a { color: rgba(255,255,255,.82); text-decoration: underline; text-decoration-color: rgba(255,255,255,.3); text-underline-offset: 3px; }
.aik .aik-hero-crumbs a:hover, .aik .aik-hero-crumbs a:focus-visible { color: #fff; text-decoration-color: #00B26B; }
.aik .aik-hero-crumbs [aria-current="page"] { color: #fff; font-weight: 500; }

.aik .aik-hero .ec10-eyebrow { margin-bottom: 16px; }
.aik .aik-hero-h1 { text-wrap: balance; max-width: 640px; }
@media (min-width: 1280px) { .aik .aik-hero .aik-hero-h1 { font-size: 50px; line-height: 1.1; max-width: 660px; } }
.aik .aik-hero-lead { margin-top: 16px; max-width: 580px; }

/* points */
.aik .aik-hero-points { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.aik .aik-hero-points li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.45; color: rgba(255,255,255,.9); }
.aik .aik-hero-points img { flex: none; width: 20px; height: 20px; margin-top: 1px; }

.aik .aik-hero .aik-hero-acts { margin-top: 24px; }

/* chips and status */
.aik .aik-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; }
.aik .aik-hero-chip { display: inline-flex; align-items: center; min-height: 32px; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.05); color: rgba(255,255,255,.88); font-size: 13px; line-height: 1.3; text-decoration: none; transition: border-color .2s, background-color .2s; }
.aik .aik-hero-chip:hover, .aik .aik-hero-chip:focus-visible { border-color: rgba(0,178,107,.7); background: rgba(0,178,107,.10); color: #fff; }
.aik .aik-hero-status { min-height: 32px; text-decoration: none; }
.aik .aik-hero-status:hover, .aik .aik-hero-status:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.aik .aik-hero a:focus-visible { outline: 2px solid #00B26B; outline-offset: 2px; }

/* visual: two phone screens in simple CSS frames */
.aik .aik-hero .aik-hero-visual { padding: 0; align-self: center; }
.aik .aik-hero .aik-hero-visual::after { content: none; }
.aik .aik-hero-visual--art picture { display: block; }
.aik .aik-hero-art { display: block; width: 100%; max-width: 600px; height: auto; margin: 0 auto; }
@media (max-width: 1279.98px) { .aik .aik-hero-art { max-width: 440px; } }
.aik .aik-hero-phones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px; max-width: 440px; margin: 0 auto; }
.aik .aik-hero-phone { position: relative; padding: 7px; border-radius: 30px; background: #0B1410; border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 24px 48px -24px rgba(0,0,0,.7), 0 0 0 1px rgba(0,178,107,.12); }
.aik .aik-hero-phone img { display: block; width: 100%; height: auto; aspect-ratio: 720 / 1560; border-radius: 23px; background: #fff; object-fit: cover; }
.aik .aik-hero-phone--1 { z-index: 1; }
.aik .aik-hero-phone--2 { margin-top: 40px; }
@media (min-width: 1024px) {
  .aik .aik-hero .aik-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; }
  .aik .aik-hero-phones { gap: 20px; max-width: 460px; }
  .aik .aik-hero-phone--2 { margin-top: 56px; }
}
@media (max-width: 1023.98px) {
  .aik .aik-hero-phones { max-width: 400px; }
}
@media (max-width: 767.98px) {
  .aik .aik-hero > .aik-hero__in { padding-top: calc(72px + 16px); padding-bottom: 36px; }
  .aik .aik-hero-crumbs { margin-bottom: 14px; }
  .aik .aik-hero-crumbs ol { font-size: 12.5px; }
  .aik .aik-hero .ec10-eyebrow { margin-bottom: 12px; }
  .aik .aik-hero-h1 { font-size: 31px; line-height: 1.18; }
  .aik .aik-hero-lead { margin-top: 12px; font-size: 16px; line-height: 1.55; }
  .aik .aik-hero-points { margin-top: 14px; gap: 6px; }
  .aik .aik-hero-points li { font-size: 15px; }
  .aik .aik-hero .aik-hero-acts { margin-top: 20px; }
  .aik .aik-hero-phones { gap: 12px; max-width: 320px; }
  .aik .aik-hero-phone { padding: 5px; border-radius: 22px; }
  .aik .aik-hero-phone img { border-radius: 17px; }
  .aik .aik-hero-phone--2 { margin-top: 28px; }
}

/* section: proof (builder A) — slim band under the hero: status label, then three ratings */
.aik .aik-proof { padding: 18px 0; background: var(--ec-alt, #F4F8F6); border-bottom: 1px solid var(--aik-rule); }
.aik .aik-proof__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px; }
.aik .aik-proof-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; font-size: 15px; line-height: 1.45; color: var(--aik-ink); }
.aik .aik-proof-status__link { font-weight: 600; color: var(--aik-green-d); text-decoration: underline; text-decoration-color: rgba(0,116,74,.35); text-underline-offset: 3px; white-space: nowrap; }
.aik .aik-proof-status__link:hover, .aik .aik-proof-status__link:focus-visible { text-decoration-color: currentColor; }
.aik .aik-proof-status__text { min-width: 0; }
.aik .aik-proof-rates { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.aik .aik-proof-rate { display: flex; align-items: center; gap: 10px; padding: 7px 16px 7px 7px; border-radius: 12px; background: #fff; border: 1px solid var(--aik-rule);
  color: var(--aik-ink); text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.aik .aik-proof-rate:hover, .aik .aik-proof-rate:focus-visible { border-color: rgba(0,178,107,.55); box-shadow: 0 6px 18px -12px rgba(4,21,13,.35); }
.aik .aik-proof-rate:focus-visible { outline: 2px solid #00744A; outline-offset: 2px; }
.aik .aik-proof-rate__logo { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--aik-rule); }
.aik .aik-proof-rate__logo img { display: block; width: 38px; height: 38px; border-radius: 50%; }
.aik .aik-proof-rate__txt { display: grid; gap: 1px; line-height: 1.25; }
.aik .aik-proof-rate__txt b { font-size: 14px; font-weight: 600; }
.aik .aik-proof-rate__txt span { font-size: 13px; color: var(--aik-muted); white-space: nowrap; }
@media (max-width: 1023.98px) { .aik .aik-proof__in { justify-content: flex-start; } }
@media (max-width: 767.98px) {
  .aik .aik-proof { padding: 16px 0; }
  .aik .aik-proof-status { font-size: 14px; }
  .aik .aik-proof-rates { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; gap: 8px; }
}

/* section: mobile-bar (builder A) — the hub's phone bar (ecommerce.css shows it below 768px only) */
.aik .aik-mbar .ec-btn__label { white-space: nowrap; }
.aik .aik-mbar .ec5-mbar__book, .aik .aik-mbar .ec5-mbar__wa { min-width: 0; }

/* ---- section part: b-sections (merged from the parallel build) ---- */
/* section: problem - a before-and-after ledger: the buyer's words (bubble) -> what an agent changes (tinted column) */
.aik .aik-problem-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 40px; }
.aik .aik-problem-head .ec-eyebrow { margin: 0 0 12px; text-align: left; }
.aik .aik-problem-h2 { margin: 0; text-align: left; }
.aik .aik-problem-lead { margin: 0; max-width: 62ch; font-size: 17px; line-height: 1.65; color: rgba(22, 25, 28, .78); }
@media (min-width: 1024px) {
  .aik .aik-problem-head { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: end; margin-bottom: 48px; }
}
.aik .aik-ledger { --aik-split: 52%; margin: 0; padding: 0; list-style: none; border: 1px solid #E3E8E5; border-radius: 20px; overflow: hidden;
  background: linear-gradient(90deg, #fff 0 calc(var(--aik-split) + 28px), #F3FAF6 calc(var(--aik-split) + 28px) 100%); }
.aik .aik-ledger__row { display: grid; grid-template-columns: var(--aik-split) 56px minmax(0, 1fr); align-items: center; margin: 0; }
.aik .aik-ledger__row + .aik-ledger__row { border-top: 1px solid #E3E8E5; }
.aik .aik-ledger__said { padding: 28px 8px 28px 32px; min-width: 0; }
.aik .aik-ledger__quote { display: inline-block; margin: 0; padding: 16px 20px; border-radius: 18px 18px 18px 4px; background: #F1F4F2;
  font-size: 19px; line-height: 1.45; font-weight: 500; color: #16191C; text-wrap: balance; }
.aik .aik-ledger__arrow { display: grid; place-items: center; width: 40px; height: 40px; margin: 0 auto; border-radius: 50%; background: #fff;
  border: 1px solid #D5E9DE; box-shadow: 0 6px 14px -8px rgba(0, 75, 45, .35); position: relative; z-index: 1; }
.aik .aik-ledger__arrow img { display: block; width: 20px; height: 20px; }
.aik .aik-ledger__change { display: flex; align-items: center; gap: 16px; min-width: 0; padding: 28px 32px 28px 16px; }
.aik .aik-ledger__change .aik-problem-ico { background: #fff; border: 1px solid #D5E9DE; }
.aik .aik-ledger__text { margin: 0; font-size: 16px; line-height: 1.6; color: rgba(22, 25, 28, .84); }
@media (min-width: 768px) and (max-width: 1023.98px) {
  .aik .aik-ledger { --aik-split: 50%; }
  .aik .aik-ledger__said { padding: 24px 4px 24px 24px; }
  .aik .aik-ledger__change { padding: 24px 24px 24px 12px; gap: 12px; }
  .aik .aik-ledger__quote { font-size: 17px; padding: 14px 16px; }
}
@media (max-width: 767.98px) {
  .aik .aik-problem-head { margin-bottom: 28px; }
  .aik .aik-ledger { background: none; border: 0; border-radius: 0; overflow: visible; }   /* no card around cards on phones */
  .aik .aik-ledger__row { grid-template-columns: minmax(0, 1fr); align-items: stretch; padding: 24px 0; }
  .aik .aik-ledger__row:first-child { padding-top: 0; }
  .aik .aik-ledger__row:last-child { padding-bottom: 0; }
  .aik .aik-ledger__said { padding: 0; }
  .aik .aik-ledger__quote { font-size: 17px; padding: 14px 16px; }
  .aik .aik-ledger__arrow { width: 32px; height: 32px; margin: 12px auto; transform: rotate(90deg); }   /* centred between the quote and the change (user) */
  .aik .aik-ledger__arrow img { width: 16px; height: 16px; }
  .aik .aik-ledger__change { padding: 14px 16px; margin: 0; border-radius: 14px; background: #F3FAF6; gap: 12px; }
  .aik .aik-ledger__change .aik-problem-ico { width: 40px; height: 40px; }
  .aik .aik-ledger__change .aik-problem-ico img { width: 20px; height: 20px; }
}
.aik .aik-problem-ico, .aik .aik-build-ico { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 12px; background: #E6F7EF; }
.aik .aik-problem-ico img, .aik .aik-build-ico img { display: block; width: 24px; height: 24px; }

/* section: build (builder B) */
/* section: build - one handover sheet: intro on the left (stays in view), six deliverables in a hairline-divided panel */
.aik .aik-build-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.aik .aik-build-intro .ec-eyebrow { margin: 0 0 12px; text-align: left; }
.aik .aik-build-h2 { margin: 0; text-align: left; }
.aik .aik-build-lead { margin: 18px 0 0; max-width: 62ch; font-size: 17px; line-height: 1.65; color: rgba(22, 25, 28, .78); }
.aik .aik-build-more { margin: 24px 0 0; }
.aik .aik-build-link { font-weight: 600; }
.aik .aik-sheet { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; border: 1px solid #E3E8E5;
  border-radius: 20px; background: #fff; box-shadow: 0 24px 48px -36px rgba(0, 60, 36, .35); overflow: hidden; }
.aik .aik-sheet__item { display: flex; align-items: flex-start; gap: 16px; min-width: 0; margin: 0; padding: 24px 22px; }
.aik .aik-sheet__item + .aik-sheet__item { border-top: 1px solid #E3E8E5; }
.aik .aik-sheet .aik-build-ico { width: 44px; height: 44px; border-radius: 12px; background: #F3FAF6; border: 1px solid #D5E9DE; }
.aik .aik-sheet .aik-build-ico img { width: 22px; height: 22px; }
.aik .aik-sheet__body { min-width: 0; padding-top: 2px; }
.aik .aik-sheet__title { margin: 0; font-size: 17px; line-height: 1.35; font-weight: 600; color: #16191C; text-wrap: balance; }
.aik .aik-sheet__text { margin: 6px 0 0; font-size: 15.5px; line-height: 1.6; color: rgba(22, 25, 28, .78); }
@media (min-width: 768px) {
  .aik .aik-sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aik .aik-sheet__item { padding: 28px 28px; }
  .aik .aik-sheet__item + .aik-sheet__item { border-top: 0; }
  .aik .aik-sheet__item:nth-child(n+3) { border-top: 1px solid #E3E8E5; }
  .aik .aik-sheet__item:nth-child(even) { border-left: 1px solid #E3E8E5; }
}
@media (min-width: 1280px) {   /* side by side only when the sheet keeps two comfortable columns */
  .aik .aik-build-layout { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 48px; align-items: start; }
  .aik .aik-build-intro { position: sticky; top: 112px; }
}

/* section: case - the product shows itself: copy and two facts left, three real app screens fanned right over a soft
   glow, the figures below as one data strip with their source note. Full-bleed dark, no card inside the band. */
.aik .aik-case { position: relative; overflow: hidden; background: #050B08; }
.aik .aik-case::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(42% 60% at 78% 42%, rgba(0, 178, 107, .22), rgba(0, 178, 107, 0) 70%), radial-gradient(30% 40% at 8% 100%, rgba(0, 178, 107, .10), rgba(0, 178, 107, 0) 70%); }
.aik .aik-case .ec-container { position: relative; }
.aik .aik-case-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center; }
.aik .aik-case-copy { min-width: 0; }
.aik .aik-case-eyebrow { margin: 0 0 12px; font-weight: 500; }
.aik .aik-case-h2 { margin: 0; font-size: 36px; line-height: 1.2; letter-spacing: -.01em; }
.aik .aik-case-lead { margin: 18px 0 0; max-width: 60ch; font-size: 17px; line-height: 1.65; color: rgba(255, 255, 255, .76); }
.aik .aik-case-facts { margin: 28px 0 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.aik .aik-case-fact { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 20px; margin: 0; padding: 18px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.aik .aik-case-fact dt { margin: 0; padding-top: 2px; font-size: 13px; line-height: 20px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #6EE7B7; }
.aik .aik-case-fact dd { margin: 0; font-size: 15.5px; line-height: 1.6; color: rgba(255, 255, 255, .88); }
.aik .aik-case-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin: 32px 0 0; }
.aik .aik-case-links { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0; padding: 0; list-style: none; }
.aik .aik-case-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; font-weight: 500; color: #fff;
  text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 4px; }
.aik .aik-case-link:hover { text-decoration-color: #6EE7B7; }
.aik .aik-case-link:focus-visible { outline: 2px solid #6EE7B7; outline-offset: 3px; border-radius: 4px; }
.aik .aik-case-link-ico { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: #00744A; }
.aik .aik-case-link-ico img { display: block; width: 11px; height: 11px; }

/* the fan: the middle screen in front, the other two tilted behind it */
.aik .aik-case-fan { position: relative; display: grid; place-items: center; min-height: 540px; }
.aik .aik-case-phone { width: 232px; padding: 8px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 36px; background: #141A17;
  box-shadow: 0 40px 70px -34px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(0, 0, 0, .6); }
.aik .aik-case-shot { display: block; width: 100%; height: auto; border-radius: 28px; background: #fff; }
.aik .aik-case-fan--3 .aik-case-phone { grid-area: 1 / 1; }
.aik .aik-case-fan--3 .aik-case-phone--2 { position: relative; z-index: 2; width: 252px; }
.aik .aik-case-fan--3 .aik-case-phone--1 { transform: translateX(-62%) rotate(-7deg) scale(.88); transform-origin: 50% 90%; opacity: .92; }
.aik .aik-case-fan--3 .aik-case-phone--3 { transform: translateX(62%) rotate(7deg) scale(.88); transform-origin: 50% 90%; opacity: .92; }

/* the figures: one strip, hairline dividers, tabular numerals */
.aik .aik-case-data { margin-top: 56px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .12); }
.aik .aik-case-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; }
.aik .aik-case-stat { margin: 0; min-width: 0; padding: 4px 20px; }
.aik .aik-case-stat:first-child { padding-left: 0; }
.aik .aik-case-stat + .aik-case-stat { border-left: 1px solid rgba(255, 255, 255, .12); }
.aik .aik-case-stat dt { margin: 0; font-size: 32px; line-height: 1.1; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: #fff; }
.aik .aik-case-stat dd { margin: 6px 0 0; font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, .7); }
.aik .aik-case-note { margin: 18px 0 0; font-size: 13px; line-height: 20px; color: rgba(255, 255, 255, .6); }

@media (min-width: 1100px) {
  .aik .aik-case-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 40px; }
}
@media (min-width: 1100px) and (max-width: 1279.98px) {   /* a narrower column: a tighter fan that stays inside it */
  .aik .aik-case-fan { min-height: 480px; }
  .aik .aik-case-phone { width: 196px; }
  .aik .aik-case-fan--3 .aik-case-phone--2 { width: 214px; }
  .aik .aik-case-fan--3 .aik-case-phone--1 { transform: translateX(-50%) rotate(-7deg) scale(.86); }
  .aik .aik-case-fan--3 .aik-case-phone--3 { transform: translateX(50%) rotate(7deg) scale(.86); }
}
@media (max-width: 1099.98px) {
  .aik .aik-case-fan { min-height: 500px; }
}
@media (max-width: 767.98px) {
  .aik .aik-case-h2 { font-size: 28px; }
  .aik .aik-case-fact { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .aik .aik-case-fan { min-height: 380px; }
  .aik .aik-case-phone { width: 172px; padding: 6px; border-radius: 28px; }
  .aik .aik-case-shot { border-radius: 22px; }
  .aik .aik-case-fan--3 .aik-case-phone--2 { width: 186px; }
  .aik .aik-case-fan--3 .aik-case-phone--1 { transform: translateX(-44%) rotate(-7deg) scale(.84); }
  .aik .aik-case-fan--3 .aik-case-phone--3 { transform: translateX(44%) rotate(7deg) scale(.84); }
  .aik .aik-case-data { margin-top: 36px; }
  .aik .aik-case-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
  .aik .aik-case-stat { padding: 0 16px; }
  .aik .aik-case-stat:nth-child(odd) { padding-left: 0; border-left: 0; }
  .aik .aik-case-stat dt { font-size: 28px; }
}
@media (max-width: 479px) {
  .aik .aik-case-actions .ec-btn { max-width: 100%; }
  .aik .aik-case-actions .ec-btn__label { padding-inline: 16px; font-size: 15px; }
}

/* ---- section part: c-sections (merged from the parallel build) ---- */
/* section: how - the definition and five steps as a plain list beside one example run, shown as a fragment of the
   agent's interface ([data-ui]) on a field of colour; the tool calls sit on a dark inset; a step lights its lines. */
.aik .aik-how__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: start; }
.aik .aik-how__h2 { margin: 0; text-align: left; }
.aik .aik-how__lead { margin: 24px 0 0; max-width: 58ch; font-size: 19px; line-height: 1.6; color: #16191C; text-wrap: pretty; }
.aik .aik-steps { margin: 40px 0 0; padding: 0; list-style: none; display: grid; gap: 26px; }
.aik .aik-steps__item { margin: 0; padding: 0 0 0 20px; position: relative; transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.aik .aik-steps__item::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 4px; border-radius: 2px; background: #CDE6D8; transition: background-color .25s ease; }
.aik .aik-steps__item--sys::before { background: #0B1F16; }
.aik .aik-steps__item:hover::before { background: #00B26B; }
.aik .aik-steps__t { margin: 0; font-size: 21px; line-height: 1.3; font-weight: 600; color: #16191C; }
.aik .aik-steps__p { margin: 4px 0 0; font-size: 16.5px; line-height: 1.55; color: #3A4440; }
.aik .aik-how__stage { margin: 0; padding: 32px; border-radius: 20px; background: #E7F4EC; }
.aik .aik-how__cap { margin: 18px 4px 0; font-size: 15px; line-height: 1.6; color: #2E3A34; }
@media (min-width: 1100px) {
  .aik .aik-how__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; }
  .aik .aik-how__stage { position: sticky; top: 112px; padding: 40px; }
}
@media (max-width: 639.98px) {
  .aik .aik-how__stage { padding: 16px; margin-inline: -4px; }
  .aik .aik-steps__t { font-size: 19px; }
  .aik .aik-how__lead { font-size: 18px; }
}
/* the fragment: the agent's own interface conventions (small radii, 1px borders) */
[data-ui].aik-run { border-radius: 12px; background: #fff; border: 1px solid #CFE3D8; overflow: hidden; font-size: 14.5px; line-height: 1.5; color: #16191C; }
[data-ui] .aik-run__bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #E3E8E5; background: #FAFCFB; }
[data-ui] .aik-run__dot { width: 8px; height: 8px; border-radius: 50%; background: #00B26B; }
[data-ui] .aik-run__title { font-size: 13.5px; font-weight: 600; color: #16191C; }
[data-ui] .aik-run__lines { margin: 0; padding: 6px 0; list-style: none; }
[data-ui] .aik-run__line { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: baseline; margin: 0; padding: 10px 16px; transition: background-color .2s ease; }
[data-ui] .aik-run__tag { min-width: 0; font-size: 12.5px; font-weight: 600; color: #00744A; overflow-wrap: anywhere; }
[data-ui] .aik-run__text { color: #16191C; }
[data-ui] .aik-run__code { font-family: inherit; font-size: 14px; line-height: 1.5; color: #E8F5EE; overflow-wrap: anywhere; }   /* plain sentences now (copy review rule 2), so no code font */
[data-ui] .aik-run__line--sys { background: #0B1F16; }
[data-ui] .aik-run__line--sys .aik-run__tag { color: #6EE7B7; }
[data-ui] .aik-run__line--sys + .aik-run__line--sys { padding-top: 0; }
[data-ui] .aik-run__handoff { margin: 0; padding: 12px 16px; border-top: 1px solid #E3E8E5; font-size: 13.5px; color: #3A4440; background: #FFF8E8; }
/* pointing at a step lights its lines in the run */
/* pointing at a step lights its lines by the kind of line, not by the step's position: a plain line takes a light tint,
   a line in your systems (dark) a lighter dark, so its text stays readable whichever step is the systems step */
.aik-how:has(.aik-steps__item[data-step="0"]:hover) [data-ui] .aik-run__line--s0:not(.aik-run__line--sys),
.aik-how:has(.aik-steps__item[data-step="1"]:hover) [data-ui] .aik-run__line--s1:not(.aik-run__line--sys),
.aik-how:has(.aik-steps__item[data-step="2"]:hover) [data-ui] .aik-run__line--s2:not(.aik-run__line--sys),
.aik-how:has(.aik-steps__item[data-step="3"]:hover) [data-ui] .aik-run__line--s3:not(.aik-run__line--sys),
.aik-how:has(.aik-steps__item[data-step="4"]:hover) [data-ui] .aik-run__line--s4:not(.aik-run__line--sys),
.aik-how:has(.aik-steps__item[data-step="5"]:hover) [data-ui] .aik-run__line--s5:not(.aik-run__line--sys) { background: #E7F4EC; }
.aik-how:has(.aik-steps__item[data-step="0"]:hover) [data-ui] .aik-run__line--s0.aik-run__line--sys,
.aik-how:has(.aik-steps__item[data-step="1"]:hover) [data-ui] .aik-run__line--s1.aik-run__line--sys,
.aik-how:has(.aik-steps__item[data-step="2"]:hover) [data-ui] .aik-run__line--s2.aik-run__line--sys,
.aik-how:has(.aik-steps__item[data-step="3"]:hover) [data-ui] .aik-run__line--s3.aik-run__line--sys,
.aik-how:has(.aik-steps__item[data-step="4"]:hover) [data-ui] .aik-run__line--s4.aik-run__line--sys,
.aik-how:has(.aik-steps__item[data-step="5"]:hover) [data-ui] .aik-run__line--s5.aik-run__line--sys { background: #1D4A36; }
@media (max-width: 639.98px) {
  [data-ui] .aik-run__line { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (prefers-reduced-motion: reduce) { .aik .aik-steps__item, .aik .aik-steps__item::before, [data-ui] .aik-run__line { transition: none; } }

/* section: safe - one flat dark field: heading and answer left; the controls on every agent as large statements, then
   what runs in Gyanee.ai set into one lighter step of the same green. No cards, rules, gradients or shadows. */
.aik .aik-safe { background: #0B1F16; color: #fff; }
.aik .aik-safe__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.aik .aik-safe__h2 { margin: 0; color: #fff; text-align: left; }
.aik .aik-safe__lead { margin: 22px 0 0; max-width: 46ch; font-size: 19px; line-height: 1.6; color: rgba(255, 255, 255, .86); }
.aik .aik-safe__t { margin: 0; font-size: 17px; line-height: 1.4; font-weight: 600; color: #6EE7B7; }
.aik .aik-safe__rules { display: grid; gap: 22px; margin: 22px 0 0; padding: 0; list-style: none; }
.aik .aik-safe__rule { position: relative; margin: 0; padding-left: 34px; font-size: 24px; line-height: 1.35; font-weight: 500; letter-spacing: -.01em; color: #fff; text-wrap: balance; }
.aik .aik-safe__rule::before { content: ""; position: absolute; left: 0; top: .32em; width: 18px; height: 18px; border-radius: 50%; background: #00B26B;
  -webkit-mask: url("../img/ai/agents/icons/s-tick.svg") center / contain no-repeat; mask: url("../img/ai/agents/icons/s-tick.svg") center / contain no-repeat; background: #6EE7B7; }
.aik .aik-safe__proof { margin-top: 44px; padding: 28px 30px; border-radius: 18px; background: #133426; }
.aik .aik-safe__facts { display: grid; gap: 14px; margin: 16px 0 0; padding: 0; list-style: none; }
.aik .aik-safe__fact { position: relative; margin: 0; padding-left: 20px; font-size: 16.5px; line-height: 1.55; color: rgba(255, 255, 255, .9); }
.aik .aik-safe__fact::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: #6EE7B7; }
@media (min-width: 1100px) {
  .aik .aik-safe__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: start; }
}
@media (max-width: 639.98px) {
  .aik .aik-safe__rule { font-size: 20px; padding-left: 30px; }
  .aik .aik-safe__rule::before { width: 16px; height: 16px; }
  .aik .aik-safe__proof { padding: 22px 20px; margin-top: 32px; }
  .aik .aik-safe__lead { font-size: 18px; }
}

/* section: process - the shared How we work component (ecommerce.css .hwj); only the CTA under the tabs is ours */
.aik .aik-process .ec-head { margin-bottom: 28px; }
.aik .aik-process__cta { margin-top: 28px; }

/* ---- section part: d-sections (merged from the parallel build) ---- */
/* section: stack */
.aik .aik-stack-head { margin-bottom: 40px; }
.aik .aik-stack__h2 { margin: 0; text-align: left; }
.aik .aik-stack-lead { margin: 16px 0 0; max-width: 60ch; font-size: 18px; line-height: 1.6; color: #16191C; }
/* the stack: one joined block of layers, lightest on top, the client's systems as the dark foundation */
.aik .aik-stack-layers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border: 1px solid #D9E3DD; border-radius: 20px; overflow: hidden; background: #FFFFFF; }
.aik .aik-stack-layer { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0; padding: 24px; border-top: 1px solid #D9E3DD; }
.aik .aik-stack-layer:first-child { border-top: 0; }
.aik .aik-stack-layer--1 { background: #FFFFFF; }
.aik .aik-stack-layer--2 { background: #F6FAF7; }
.aik .aik-stack-layer--3 { background: #EEF5F0; }
.aik .aik-stack-layer--4 { background: #E5EFE9; }
.aik .aik-stack-layer--base { background: #10261C; border-top-color: #10261C; }
.aik .aik-stack-name { margin: 0; font-size: 19px; font-weight: 600; line-height: 1.3; color: #16191C; }
.aik .aik-stack-text { margin: 6px 0 0; max-width: 46ch; font-size: 16px; line-height: 1.55; color: #2E3A34; }
.aik .aik-stack-layer--base .aik-stack-name { color: #FFFFFF; }
.aik .aik-stack-layer--base .aik-stack-text { color: #CFE3D8; }
.aik .aik-stack-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-content: center; gap: 8px; }
.aik .aik-stack-chip { display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding: 5px 14px 5px 5px; border: 1px solid #D9E3DD; border-radius: 999px; background: #FFFFFF; font-size: 14px; font-weight: 500; line-height: 1.3; color: #16191C; white-space: nowrap; }
.aik .aik-stack-chip--text { padding: 7px 14px; }
.aik .aik-stack-badge { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #16191C; }
.aik .aik-stack-badge img { display: block; width: 14px; height: 14px; }
@media (min-width: 768px) {
  .aik .aik-stack-layer { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 32px; align-items: center; padding: 28px 32px; }
  .aik .aik-stack-chips { justify-content: flex-end; }
}
@media (min-width: 1100px) {
  .aik .aik-stack__in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 64px; align-items: start; }
  .aik .aik-stack-head { position: sticky; top: 112px; margin-bottom: 0; }
}

/* section: engage */
.aik .aik-engage-lead { max-width: 760px; }
.aik .aik-engage-grid { list-style: none; margin: 0; padding: 0; counter-reset: aikengage; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.aik .aik-engage-card { counter-increment: aikengage; position: relative; min-width: 0; padding: 24px; border: 1px solid #E3EAE6; border-radius: var(--aik-radius, 16px); background: var(--ec-alt, #F4F8F6); }
.aik .aik-engage-card::before { content: counter(aikengage, decimal-leading-zero); content: counter(aikengage, decimal-leading-zero) / ""; display: block; margin-bottom: 14px; font-size: 13px; font-weight: 600; letter-spacing: .04em; font-variant-numeric: tabular-nums; color: #00744A; }
.aik .aik-engage-title { margin: 0; font-size: 19px; font-weight: 600; line-height: 1.35; color: #1C2522; text-wrap: balance; }
.aik .aik-engage-text { margin: 8px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--ec-body); }
.aik .aik-engage-acts { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.aik .aik-engage-offer { display: inline-flex; align-items: flex-start; gap: 10px; min-width: 0; max-width: 520px; padding: 4px 0; text-decoration: none; color: #1C2522; }
.aik .aik-engage-offer .ec8-offer__ico { width: 22px; height: 22px; margin-top: 1px; }
.aik .aik-engage-offer .ec8-offer__ico img { width: 18px; height: 18px; }
.aik .aik-engage-offer .ec8-offer__txt { display: grid; gap: 2px; white-space: normal; line-height: 1.4; }
.aik .aik-engage-offer .ec8-offer__txt b { display: block; font-size: 15.5px; font-weight: 600; color: #1C2522; }
.aik .aik-engage-offer .ec8-offer__txt b::after { content: " →"; color: #00744A; }
.aik .aik-engage-offer .ec8-offer__txt span { display: block; font-size: 14px; line-height: 1.45; color: var(--ec-body); }
.aik .aik-engage-offer:hover .ec8-offer__txt b, .aik .aik-engage-offer:focus-visible .ec8-offer__txt b { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #00B26B; }
.aik .aik-engage-offer:focus-visible { outline: 2px solid #00744A; outline-offset: 3px; border-radius: 6px; }
@media (max-width: 639.98px) { .aik .aik-engage-book { width: 100%; } }
@media (min-width: 768px) { .aik .aik-engage-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .aik .aik-engage-card { padding: 28px; } }

/* section: faq (native <details>; plus turns to a cross when open, like the hub) */
.aik .aik-faq-list { counter-reset: aikfaq; display: grid; gap: 10px; align-content: start; min-width: 0; }
.aik .aik-faq-item { border: 1px solid transparent; border-radius: 12px; background: rgba(255, 255, 255, .55); transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease; }
.aik .aik-faq-item:hover { background: rgba(255, 255, 255, .9); }
.aik .aik-faq-item[open] { background: #fff; border-color: #E3EAE6; box-shadow: var(--ec-sh-2, 0 10px 28px -18px rgba(4, 21, 13, .22)); }
.aik .aik-faq-sum { display: flex; align-items: center; gap: 14px; padding: 16px 16px 16px 18px; border-radius: 12px; cursor: pointer; list-style: none; color: var(--ec-faq-ink, #16191C); }
.aik .aik-faq-sum::-webkit-details-marker { display: none; }
.aik .aik-faq-sum::marker { content: ""; }
.aik .aik-faq-sum:focus-visible { outline: 2px solid #00744A; outline-offset: 2px; }
.aik .aik-faq-n { flex: none; min-width: 1.8em; font-size: 13px; font-weight: 600; letter-spacing: .04em; font-variant-numeric: tabular-nums; color: rgba(0, 116, 74, .4); transition: color .25s ease; }
.aik .aik-faq-item[open] .aik-faq-n { color: #00B26B; }
.aik .aik-faq-q { flex: 1 1 auto; min-width: 0; font-weight: 500; font-size: 17px; line-height: 1.45; letter-spacing: -.2px; }
.aik .aik-faq-tog { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid #E3EAE6; background: #fff; transition: transform .3s var(--ec-ease-out, ease), background-color .25s ease, border-color .25s ease; }
.aik .aik-faq-tog img { display: block; width: 100%; height: 100%; }
.aik .aik-faq-sum:hover .aik-faq-tog { border-color: #00B26B; }
.aik .aik-faq-item[open] .aik-faq-tog { transform: rotate(45deg); background: #E7F6EF; border-color: #00B26B; }
.aik .aik-faq-a { margin: 0; padding: 0 70px 20px 56px; font-size: 16px; line-height: 1.7; color: var(--ec-body); }
@media (max-width: 767px) {
  .aik .aik-faq-sum { gap: 10px; padding: 14px 12px 14px 14px; }
  .aik .aik-faq-q { font-size: 16px; }
  .aik .aik-faq-n { min-width: 1.6em; }
  .aik .aik-faq-a { padding: 0 16px 18px 14px; font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) { .aik .aik-faq-item, .aik .aik-faq-tog, .aik .aik-faq-n { transition: none; } }

/* section: related */
.aik .aik-related-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.aik .aik-related-grid > li { display: flex; min-width: 0; }
.aik .aik-related-card { position: relative; display: flex; flex-direction: column; width: 100%; min-width: 0; padding: 24px 24px 72px; border: 1px solid #E3EAE6; border-radius: var(--aik-radius, 16px); background: #fff; color: #1C2522; text-decoration: none; transition: border-color .2s ease, box-shadow .2s ease; }
.aik .aik-related-card:hover { border-color: #00B26B; box-shadow: 0 10px 28px -18px rgba(4, 21, 13, .22); }
.aik .aik-related-card:focus-visible { outline: 2px solid #00744A; outline-offset: 3px; }
.aik .aik-related-title { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.35; color: #1C2522; text-wrap: balance; }
.aik .aik-related-card:hover .aik-related-title { color: #00744A; }
.aik .aik-related-line { display: block; margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--ec-body); }
.aik .aik-related-go { position: absolute; left: 24px; bottom: 24px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #00744A; transition: transform .2s ease; }
.aik .aik-related-go img { display: block; width: 16px; height: 16px; }
.aik .aik-related-card:hover .aik-related-go { transform: translateX(4px); }
@media (min-width: 640px) { .aik .aik-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1024px) { .aik .aik-related-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .aik .aik-related-card, .aik .aik-related-go { transition: none; } }

/* section: form */

/* ---- contact: the booking link under What happens next (from ai.css, so the kit does not load the hub's page CSS) ---- */
.aik .pv-cal { margin-top: 32px; padding-top: 24px; max-width: 420px; border-top: 1px solid rgba(255, 255, 255, .16); }
.aik .pv-cal__q { margin: 0; font-size: 15px; line-height: 24px; color: rgba(255, 255, 255, .78); }
.aik .pv-cal__link { display: inline-block; margin-top: 6px; font-size: 16px; font-weight: 600; color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.aik .pv-cal__link:hover { color: #6EE7B7; }
.aik .pv-cal__link:focus-visible { outline: 2px solid #6EE7B7; outline-offset: 3px; border-radius: 4px; }
.aik .pv-cal__who { margin: 6px 0 0; font-size: 14px; line-height: 21px; color: rgba(255, 255, 255, .72); }

/* ---- section: why (the eCommerce ec11 layout with six reasons; two icons the shared set does not have) ---- */
.aik .ec11-mask--shield { --ec11-i: url("../img/ecommerce/icons/ec-step-shield-check.svg"); }
.aik .ec11-mask--clock { --ec11-i: url("../img/ai/agents/icons/w-clock.svg"); }

/* ---- section: cta (the ec14 band; logo sizes as on the AI hub, from ai.css which this page does not load) ---- */
.aik .ec14-logos li:nth-child(n) img { height: 20px; max-width: 110px; }
.aik .ec14-logos li:nth-child(4n+2) img { height: 22px; }
.aik .ec14-logos li:nth-child(4n+4) img { height: 24px; }

/* ---- divider: How it works and Why Provis are both white and sit together; a hairline separates them ---- */
.aik #how + #why { padding-top: 0; }
.aik #how + #why > .ec-container::before { content: ""; display: block; height: 1px; margin-bottom: var(--ec-sec-y, 64px); background: #E3E8E5; }
.aik .aik-process .aik-process__cta { order: 99; }   /* on phones the shared component reorders its side column; the CTA stays last */

/* ---- section: agents - the jobs agents do, an uneven board of real product crops; the first job is the tall tile ---- */
.aik #problem + #agents { padding-top: 0; }
.aik #problem + #agents > .ec-container::before { content: ""; display: block; height: 1px; margin-bottom: var(--ec-sec-y, 64px); background: #E3E8E5; }
.aik .aik-agents__head { max-width: 720px; margin-bottom: 40px; }
.aik .aik-agents__h2 { margin: 0; text-align: left; }
.aik .aik-agents__lead { margin: 16px 0 0; max-width: 60ch; font-size: 18px; line-height: 1.6; color: #16191C; }
.aik .aik-agents__board { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; }
.aik .aik-agents__job { display: flex; flex-direction: column; min-width: 0; margin: 0; border: 1px solid #E3E8E5; border-radius: 20px; background: #FFFFFF; overflow: hidden; }
.aik .aik-agents__well { position: relative; aspect-ratio: 16 / 10; background: #EEF3F0; overflow: hidden; }
.aik .aik-agents__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.aik .aik-agents__job--1 .aik-agents__well { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5; padding: 24px 20px; background: #E9EDF7; }
.aik .aik-agents__job--1 .aik-agents__img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; border: 1px solid #D5DBEE; border-radius: 14px; }
.aik .aik-agents__job--3 .aik-agents__img { object-position: 0 0; }
.aik .aik-agents__job--4 .aik-agents__well { background: #F3F5FB; }
.aik .aik-agents__job--4 .aik-agents__img { object-position: 50% 0; }
.aik .aik-agents__body { display: flex; flex-direction: column; flex: 1 0 auto; padding: 22px 24px 24px; }
.aik .aik-agents__t { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 600; color: #16191C; text-wrap: balance; }
.aik .aik-agents__p { margin: 8px 0 0; max-width: 52ch; font-size: 16px; line-height: 1.6; color: #2E3A34; }
.aik .aik-agents__proof { align-self: flex-start; margin-top: auto; padding: 14px 0 2px; font-size: 15px; font-weight: 600; color: #00744A; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.aik .aik-agents__proof:hover { color: #005C3A; text-decoration-thickness: 2px; }
.aik .aik-agents__proof:focus-visible { outline: 2px solid #00B26B; outline-offset: 3px; border-radius: 3px; }

/* the job with no public case: a dark tile whose well draws its own words as a flow */
.aik .aik-agents__job--flow { background: #10261C; border-color: #10261C; }
.aik .aik-agents__job--flow .aik-agents__well { background: #163426; display: flex; align-items: center; justify-content: center; }
.aik .aik-agents__job--flow .aik-agents__t { color: #FFFFFF; }
.aik .aik-agents__job--flow .aik-agents__p { color: #CFE3D8; }
.aik .aik-agents__flow { display: grid; grid-template-columns: auto 28px auto 28px auto; grid-template-rows: auto 36px auto; align-items: center; justify-items: center; }
.aik .aik-agents__node { padding: 8px 14px; border: 1px solid #3C6A55; border-radius: 999px; background: #10261C; color: #E8F3ED; font-size: 14px; font-weight: 500; line-height: 1.2; white-space: nowrap; }
.aik .aik-agents__pipe { width: 100%; height: 2px; background: #00B26B; }
.aik .aik-agents__drop { grid-column: 5; grid-row: 2; width: 2px; height: 100%; background: #00B26B; }
.aik .aik-agents__node:nth-child(5), .aik .aik-agents__node--team { justify-self: stretch; text-align: center; }   /* ERP spans the column "Your team" sets, so the pipe meets it */
.aik .aik-agents__node--team { grid-column: 5; grid-row: 3; border-color: #00B26B; background: #00B26B; color: #0B1F16; font-weight: 600; }

@media (min-width: 768px) {
  .aik .aik-agents__board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aik .aik-agents__job--1 { grid-column: 1 / -1; flex-direction: row; }
  .aik .aik-agents__job--1 .aik-agents__well { flex: 0 0 46%; aspect-ratio: auto; height: 440px; order: 2; }
  .aik .aik-agents__job--1 .aik-agents__img { max-height: 392px; }
  .aik .aik-agents__job--1 .aik-agents__body { flex: 1 1 0; min-width: 0; justify-content: center; padding: 32px; }
}
@media (min-width: 1024px) {
  .aik .aik-agents__head { margin-bottom: 48px; }
  .aik .aik-agents__board { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
  .aik .aik-agents__job { grid-column: span 4; }
  .aik .aik-agents__job--1 { grid-column: 1 / span 4; grid-row: 1 / span 2; flex-direction: column; }
  .aik .aik-agents__job--1 .aik-agents__well { flex: 1 1 0; height: auto; min-height: 0; aspect-ratio: auto; order: 0; }
  .aik .aik-agents__job--1 .aik-agents__img { max-height: 100%; }
  .aik .aik-agents__job--1 .aik-agents__body { flex: 0 0 auto; justify-content: flex-start; padding: 24px 28px 28px; }
  .aik .aik-agents__job--1 .aik-agents__t { font-size: 24px; }
  .aik .aik-agents__well { aspect-ratio: 16 / 9; }
}

/* ---- section: contact - laid out like the Shopify page's contact section (user's call): a dark card, who you are
   writing to on the left, the form in three steps on the right. The left panel keeps that page's gradient, rings and
   faint grid, by the same request. ---- */
.aik .aik-cf { scroll-margin-top: 96px; padding: 56px 16px; background: #070908; }
.aik .aik-cf__card { max-width: 1280px; margin: 0 auto; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 28px; background: #0B0F0D; }
.aik .aik-cf__panel { display: none; position: relative; isolation: isolate; overflow: hidden; padding: 40px; background: radial-gradient(120% 90% at 100% 100%, #0B6B44 0%, rgba(11,107,68,0) 60%), linear-gradient(135deg, #050806 0%, #08291B 45%, #0A5A3A 100%); }
.aik .aik-cf__panel::before { content: ""; position: absolute; z-index: -1; pointer-events: none; width: 680px; height: 680px; right: -345px; bottom: -400px; border-radius: 50%; background: radial-gradient(circle closest-side, transparent 0 212px, rgba(255,255,255,.07) 212px 213px, rgba(255,255,255,.045) 213px 262px, rgba(255,255,255,.03) 262px 312px, transparent 312px); }
.aik .aik-cf__panel::after { content: ""; position: absolute; z-index: -1; right: 0; bottom: 0; width: 70%; height: 60%; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 32px 32px; background-position: right bottom; -webkit-mask-image: radial-gradient(85% 85% at 100% 100%, #000 35%, transparent); mask-image: radial-gradient(85% 85% at 100% 100%, #000 35%, transparent); }
.aik .aik-cf__logo { position: relative; display: block; width: auto; height: 32px; align-self: flex-start; }
.aik .aik-cf__pitch { position: relative; margin-top: auto; padding-top: 32px; }
.aik .aik-cf__kicker { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #9FF5CD; }
.aik .aik-cf__big { margin: 12px 0 0; font-size: 34px; font-weight: 800; line-height: 1.08; letter-spacing: -.03em; color: #FFFFFF; }
.aik .aik-cf__big span { color: #9FF5CD; }
.aik .aik-cf__text { margin: 16px 0 0; max-width: 28rem; font-size: 16px; line-height: 1.65; color: rgba(255,255,255,.8); }
.aik .aik-cf__direct { margin-top: 28px; padding: 20px; border: 1px solid rgba(255,255,255,.15); border-radius: 18px; background: rgba(6,40,26,.45); }
.aik .aik-cf__direct-h { margin: 0; font-size: 14px; font-weight: 600; color: #FFFFFF; }
.aik .aik-cf__contacts { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; }
.aik .aik-cf__contact { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-radius: 10px; font-size: 15px; color: rgba(255,255,255,.85); text-decoration: none; }
.aik .aik-cf__contact:hover { color: #FFFFFF; }
.aik .aik-cf__contact:hover b { text-decoration: underline; text-underline-offset: 3px; }
.aik .aik-cf__contact-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,.1); }
.aik .aik-cf__contact-ico img { display: block; width: 18px; height: 18px; }
.aik .aik-cf__contact-t { min-width: 0; }
.aik .aik-cf__contact-t span { display: block; font-size: 12px; color: rgba(255,255,255,.65); }
.aik .aik-cf__contact-t b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.aik .aik-cf__tz { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.15); font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.75); }

.aik .aik-cf__main { min-width: 0; padding: 24px; }
.aik .aik-cf__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aik .aik-cf__step { position: relative; padding-right: 8px; }
.aik .aik-cf__line { position: absolute; left: 48px; right: 12px; top: 18px; height: 1px; background: rgba(255,255,255,.15); }
.aik .aik-cf__line i { display: block; width: 0; height: 100%; background: #00B26B; transition: width .5s cubic-bezier(.2,.7,.2,1); }
.aik .aik-cf__step.is-current .aik-cf__line i { width: 30%; }
.aik .aik-cf__step.is-done .aik-cf__line i { width: 100%; }
.aik .aik-cf__num { position: relative; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.7); transition: background-color .25s, border-color .25s, color .25s; }
.aik .aik-cf__num img { display: none; width: 16px; height: 16px; }
.aik .aik-cf__step.is-current .aik-cf__num, .aik .aik-cf__step.is-done .aik-cf__num { background: #00B26B; border-color: #00B26B; color: #04150D; }
.aik .aik-cf__step.is-done .aik-cf__num span { display: none; }
.aik .aik-cf__step.is-done .aik-cf__num img { display: block; }
.aik .aik-cf__step-name { display: block; margin-top: 12px; font-size: 13px; font-weight: 600; line-height: 1.3; color: rgba(255,255,255,.6); transition: color .25s; }
.aik .aik-cf__step.is-current .aik-cf__step-name { color: #FFFFFF; }

.aik .aik-cf__h2 { margin: 40px 0 0; font-size: 26px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: #FFFFFF; text-wrap: balance; }
.aik .aik-cf__intro { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.65); }
.aik .aik-cf__form { margin-top: 32px; }
.aik .aik-cf__panel-step { display: grid; gap: 20px; min-width: 0; margin: 0 0 20px; padding: 0; border: 0; }
.aik .aik-cf__panel-step[hidden] { display: none; }
.aik .aik-cf__label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: #FFFFFF; }
.aik .aik-cf__label span { font-weight: 400; color: rgba(255,255,255,.6); }
.aik .aik-cf__label-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.aik .aik-cf__label-row .aik-cf__label { margin-bottom: 0; }
.aik .aik-cf__count { font-size: 12px; color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums; }
.aik .aik-cf__wrap { position: relative; }
.aik .aik-cf .aik-cf__input { display: block; width: 100%; height: 56px; margin: 0; padding: 0 16px; border: 1px solid rgba(255,255,255,.15); border-radius: 12px; background: rgba(255,255,255,.04); box-shadow: none; font: inherit; font-size: 15px; color: #FFFFFF; caret-color: #00B26B; }
.aik .aik-cf .aik-cf__input::placeholder { color: rgba(255,255,255,.55); opacity: 1; }
.aik .aik-cf .aik-cf__input:focus { outline: none; border-color: #00B26B; box-shadow: 0 0 0 2px rgba(0,178,107,.3); }
.aik .aik-cf .aik-cf__input[aria-invalid="true"] { border-color: #F87171; }
.aik .aik-cf .aik-cf__wrap--ico .aik-cf__input { padding-left: 48px; }
.aik .aik-cf .aik-cf__wrap--select .aik-cf__input { padding-right: 48px; -webkit-appearance: none; appearance: none; cursor: pointer; }
.aik .aik-cf .aik-cf__wrap--select .aik-cf__input.is-placeholder { color: rgba(255,255,255,.55); }
.aik .aik-cf .aik-cf__input option { background: #0B0F0D; color: #FFFFFF; }
.aik .aik-cf .aik-cf__input--area { height: auto; min-height: 152px; padding: 12px 16px; line-height: 1.6; resize: vertical; }
.aik .aik-cf__in-ico, .aik .aik-cf__chev { position: absolute; top: 28px; transform: translateY(-50%); pointer-events: none; }
.aik .aik-cf__in-ico { left: 16px; }
.aik .aik-cf__chev { right: 16px; }
.aik .aik-cf .ec-error { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: #FCA5A5; }
.aik .aik-cf .ec-error:empty { display: none; }
.aik .aik-cf .ec-error a { color: #FFFFFF; text-decoration: underline; }
.aik .aik-cf__actions { display: flex; gap: 12px; padding-top: 16px; }
.aik .aik-cf__btn { display: inline-flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 0 28px; border: 2px solid #00B26B; border-radius: 14px; background: #00B26B; box-shadow: 0 12px 32px -12px rgba(0,178,107,.7); font-size: 16px; font-weight: 600; color: #04150D; white-space: nowrap; cursor: pointer; transition: background-color .2s, border-color .2s; }
.aik .aik-cf__btn:hover { background: #00965A; border-color: #00965A; }
.aik .aik-cf__btn img { display: block; width: 18px; height: 18px; }
.aik .aik-cf__btn .ec-btn__sending, .aik .aik-cf__btn.is-loading [data-ec-submit-label] { display: none; }
.aik .aik-cf__btn.is-loading .ec-btn__sending { display: inline; }
.aik .aik-cf__btn.is-loading, .aik .aik-cf__btn:disabled { cursor: progress; }
.aik .aik-cf__btn .ec-spinner { border-color: rgba(4,21,13,.3); border-top-color: #04150D; }
.aik .aik-cf__back { display: inline-flex; flex: none; align-items: center; justify-content: center; min-height: 56px; padding: 0 24px; border: 1px solid rgba(255,255,255,.2); border-radius: 16px; background: transparent; font-size: 15px; font-weight: 600; color: #FFFFFF; cursor: pointer; transition: border-color .2s; }
.aik .aik-cf__back:hover { border-color: rgba(255,255,255,.5); }
.aik .aik-cf__note { margin: 0; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.6); }
.aik .aik-cf__legal { margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: rgba(255,255,255,.55); }
.aik .aik-cf__legal a { color: rgba(255,255,255,.8); text-decoration: underline; text-underline-offset: 2px; }
.aik .aik-cf a:focus-visible, .aik .aik-cf button:focus-visible { outline: 2px solid #9FF5CD; outline-offset: 2px; }
/* without the step script every field shows at once, and the step controls go */
.aik .aik-cf__form:not(.is-stepped) [data-aik-next], .aik .aik-cf__form:not(.is-stepped) [data-aik-back] { display: none; }

.aik .aik-cf__direct--phone { margin-top: 32px; padding: 24px 0 0; border: 0; border-top: 1px solid rgba(255,255,255,.1); border-radius: 0; background: none; }
.aik .aik-cf__direct--phone .aik-cf__contacts { margin-top: 12px; gap: 8px; }
.aik .aik-cf__direct--phone .aik-cf__contact { padding: 10px 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; font-size: 13.5px; color: #FFFFFF; }
.aik .aik-cf__direct--phone .aik-cf__contact-ico { width: 32px; height: 32px; border-radius: 9px; background: rgba(0,178,107,.15); }
.aik .aik-cf__direct--phone .aik-cf__contact-t span { display: none; }
.aik .aik-cf__direct--phone .aik-cf__tz { border-top: 0; padding-top: 0; color: rgba(255,255,255,.6); }

@media (min-width: 640px) {
  .aik .aik-cf__main { padding: 32px; }
  .aik .aik-cf__step-name { font-size: 15px; }
}
@media (min-width: 768px) {
  .aik .aik-cf__card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aik .aik-cf__panel { display: flex; flex-direction: column; }
  .aik .aik-cf__main { border-left: 1px solid rgba(255,255,255,.1); }
  .aik .aik-cf__direct--phone { display: none; }
}
@media (min-width: 1024px) {
  .aik .aik-cf { padding: 96px 16px; }
  .aik .aik-cf__panel, .aik .aik-cf__main { padding: 56px; }
  .aik .aik-cf__big { font-size: 44px; }
  .aik .aik-cf__text { font-size: 17px; }
  .aik .aik-cf__h2 { font-size: 32px; }
  .aik .aik-cf__intro { font-size: 16px; }
}

/* ---- hero refinement: a quieter copy column and a larger drawing. Points sit in a wrapping row, the estimate offer is
   one plain link under the buttons, the Gyanee.ai chips are plain links beside the status pill, and from 1280px the
   columns split evenly so the drawing's labels read at size. ---- */
.aik .aik-hero-points { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; }
.aik .aik-hero-points li { font-size: 15.5px; }
.aik .aik-hero .aik-hero-acts { margin-top: 28px; }
.aik .aik-hero-offer { display: inline-flex; align-items: flex-start; gap: 10px; margin-top: 18px; max-width: 560px; padding: 4px 0; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.8); text-decoration: none; }
.aik .aik-hero-offer img { flex: none; width: 16px; height: 16px; margin-top: 3px; }
.aik .aik-hero-offer b { font-weight: 600; color: #FFFFFF; }
.aik .aik-hero-offer span { text-decoration: underline; text-decoration-color: rgba(255,255,255,.3); text-underline-offset: 4px; }
.aik .aik-hero-offer:hover span { text-decoration-color: #00B26B; }
.aik .aik-hero-meta { gap: 6px 18px; margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); }
.aik .aik-hero .aik-hero-chip { min-height: 24px; padding: 0; border: 0; border-radius: 0; background: none; font-size: 14px; color: rgba(255,255,255,.78); text-decoration: underline; text-decoration-color: rgba(255,255,255,.25); text-underline-offset: 4px; }
.aik .aik-hero .aik-hero-chip:hover, .aik .aik-hero .aik-hero-chip:focus-visible { background: none; color: #FFFFFF; text-decoration-color: #00B26B; }
@media (min-width: 1280px) {
  .aik .aik-hero .aik-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
  .aik .aik-hero-art { max-width: 640px; }
}
/* ---- hero ratings: Clutch, Google and Upwork under the buttons, in place of the proof band (user, 2026-11-04) ---- */
.aik .aik-hero-rates { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; }
.aik .aik-hero-rate { display: flex; align-items: center; gap: 10px; padding: 7px 16px 7px 7px; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; background: rgba(255,255,255,.05); color: #FFFFFF; text-decoration: none; transition: border-color .2s, background-color .2s; }
.aik .aik-hero-rate:hover { border-color: rgba(0,178,107,.6); background: rgba(0,178,107,.08); }
.aik .aik-hero-rate__logo { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; background: #FFFFFF; }
.aik .aik-hero-rate__logo img { display: block; width: 38px; height: 38px; border-radius: 50%; }
.aik .aik-hero-rate__txt { display: grid; gap: 1px; line-height: 1.25; }
.aik .aik-hero-rate__txt b { font-size: 14px; font-weight: 600; color: #FFFFFF; }
.aik .aik-hero-rate__txt span { font-size: 13px; color: rgba(255,255,255,.72); white-space: nowrap; }
@media (max-width: 479.98px) {
  .aik .aik-hero-rates { gap: 8px; }
  .aik .aik-hero-rate { padding: 6px 12px 6px 6px; gap: 8px; }
  .aik .aik-hero-rate__logo, .aik .aik-hero-rate__logo img { width: 32px; height: 32px; }
}
/* ---- motion, as on the eCommerce service page: the hero rises in on load (title, lead and actions from ecommerce.css,
   then the ratings and the drawing here); the sections below reveal on scroll (aik-reveal.js + ecommerce.css). Off
   under reduced motion; nothing is hidden without the script. ---- */
@media (prefers-reduced-motion: no-preference) {
  .aik .aik-hero .aik-hero-rates { animation: ec-hero-rise .5s ease-out .24s backwards; }
  .aik .aik-hero .aik-hero-visual { animation: ec-hero-fade .6s ease-out .12s backwards; }
}
/* ---- process scenes: delays and skeleton widths as classes, so the partial needs no inline style (UD-057) ---- */
.aik .hwj .d0 { --d: 0; } .aik .hwj .d1 { --d: 1; } .aik .hwj .d2 { --d: 2; } .aik .hwj .d3 { --d: 3; } .aik .hwj .d4 { --d: 4; } .aik .hwj .d5 { --d: 5; } .aik .hwj .d6 { --d: 6; } .aik .hwj .d7 { --d: 7; } .aik .hwj .d8 { --d: 8; } .aik .hwj .d9 { --d: 9; } .aik .hwj .d10 { --d: 10; } .aik .hwj .d11 { --d: 11; } .aik .hwj .d12 { --d: 12; } .aik .hwj .d13 { --d: 13; }
.aik .hwj .sk.w55 { width: 55%; } .aik .hwj .sk.w60 { width: 60%; } .aik .hwj .sk.w62 { width: 62%; } .aik .hwj .sk.w65 { width: 65%; } .aik .hwj .sk.w70 { width: 70%; } .aik .hwj .sk.w72 { width: 72%; } .aik .hwj .sk.w78 { width: 78%; } .aik .hwj .sk.w80 { width: 80%; } .aik .hwj .sk.w85 { width: 85%; }
.aik .hwj .aik-grow { flex: 1; min-width: 0; }
/* ---- case: the Gyanee.ai screens in iPhone frames (user). The screenshots are Android captures, so this page uses
   copies with the status bar painted in the app's header colour and the three-button bar cut off; the frame adds a
   thin black bezel, a metal edge, the Dynamic Island and the home indicator. Sizes follow the phone's width (cqw). ---- */
.aik .aik-case-phone { position: relative; container-type: inline-size; padding: 9px; border: 1px solid #3A3F3D; border-radius: 42px; background: #050505;
  box-shadow: 0 40px 70px -34px rgba(0, 0, 0, .9), inset 0 0 0 1.5px #1C1F1E; }
.aik .aik-case-shot { box-sizing: content-box; padding-bottom: 7cqw; border-radius: 13.6cqw; background: #FFFFFF; }   /* the strip under the tab bar where iOS puts the home indicator */
.aik .aik-case-phone::before { content: ""; position: absolute; z-index: 1; top: 6.4cqw; left: 50%; width: 31cqw; height: 9cqw; border-radius: 99px; background: #000; transform: translateX(-50%); }
.aik .aik-case-phone::after { content: ""; position: absolute; z-index: 1; bottom: 6.6cqw; left: 50%; width: 36cqw; height: 1.7cqw; border-radius: 99px; background: rgba(0, 0, 0, .55); transform: translateX(-50%); }
@media (min-width: 1100px) and (max-width: 1279.98px) { .aik .aik-case-phone { padding: 8px; border-radius: 36px; } }
@media (max-width: 767.98px) { .aik .aik-case-phone { padding: 7px; border-radius: 31px; } }
/* ---- agents: a job's own flow on a light well (MCP page); the dark flow stays for the job marked dark ---- */
.aik .aik-agents__job--flowlight .aik-agents__well { display: flex; align-items: center; justify-content: center; background: #EEF3F0; }
.aik .aik-agents__job--flowlight .aik-agents__node { border-color: #C9D8CF; background: #FFFFFF; color: #16191C; }
.aik .aik-agents__job--flowlight .aik-agents__node--team { border-color: #00B26B; background: #00B26B; color: #0B1F16; }
.aik .aik-agents__job--1 .aik-agents__img[src*="/mcp/"] { width: 100%; max-height: none; border-radius: 12px; }   /* a landscape screen fills the tall tile's width */
.aik .aik-agents__job--1:has(.aik-agents__img[src*="/mcp/"]) .aik-agents__well { padding: 20px 16px; }
.aik .aik-agents__job--flowlight .aik-agents__flow { grid-template-columns: auto 18px auto 18px auto; }
.aik .aik-agents__job--flowlight .aik-agents__node { padding: 7px 11px; font-size: 13px; }
.aik .aik-agents__more { margin: 28px 0 0; font-size: 16px; line-height: 1.6; color: #2E3A34; }
.aik .aik-agents__more a { font-weight: 600; color: #00744A; text-decoration: underline; text-underline-offset: 4px; }
.aik .aik-agents__more a:hover { color: #005C3A; }

/* ---- case: desktop screens in window frames, the first in front (MCP page) ---- */
.aik .aik-case-screens { position: relative; margin: 0; padding: 0 0 8px; }
.aik .aik-case-screen { overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 16px; background: #F9F8F5; box-shadow: 0 40px 70px -34px rgba(0,0,0,.9); }
.aik .aik-case-screen__img { display: block; width: 100%; height: auto; }
.aik .aik-case-screens--2 .aik-case-screen--1 { position: relative; z-index: 2; width: 88%; }
.aik .aik-case-screens--2 .aik-case-screen--2 { position: absolute; z-index: 1; right: 0; top: 12%; width: 72%; opacity: .55; }
.aik .aik-case-screens__cap { position: relative; z-index: 2; margin-top: 14px; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.66); }
@media (max-width: 767.98px) {
  .aik .aik-case-screens--2 .aik-case-screen--1 { width: 100%; }
  .aik .aik-case-screens--2 .aik-case-screen--2 { display: none; }
}
/* print shows every section: the scroll reveal's hidden state never reaches paper */
@media print { .ec-page.ec-motion .ecm { opacity: 1 !important; translate: none !important; animation: none !important; } }
/* ---- case without images (Pilot-first pages): the facts take the right column instead of leaving it empty ---- */
@media (min-width: 1100px) {
  .aik .aik-case-grid--solo { grid-template-columns: minmax(0, 1fr); }
  .aik .aik-case-grid--solo .aik-case-copy { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: 64px; align-items: start; }
  .aik .aik-case-grid--solo .aik-case-copy > * { grid-column: 1; }
  .aik .aik-case-grid--solo .aik-case-copy > .aik-case-facts { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; }
}
/* ---- case: two phone shots fan side by side ---- */
.aik .aik-case-fan--2 .aik-case-phone { grid-area: 1 / 1; }
.aik .aik-case-fan--2 .aik-case-phone--1 { position: relative; z-index: 2; transform: translateX(-28%) rotate(-5deg); transform-origin: 50% 90%; }
.aik .aik-case-fan--2 .aik-case-phone--2 { transform: translateX(30%) rotate(5deg) scale(.94); transform-origin: 50% 90%; opacity: .92; }