/* AI page (#1476): extras on top of ecommerce.css, for the AI page's different item counts and its self-hosted stack card.
   Scoped under .ec-page--ai (the page wrapper also carries .ec-page). */

/* Trusted: four logos, one row from 768px, 2 x 2 below */
.ec-page--ai .ec-logo--ai-gyanee, .ec-page--ai .ec-logo--ai-chitra { --lh: 30px; }
.ec-page--ai .ec-logo--ai-proviscommerce { --lh: 32px; }
.ec-page--ai .ec-logowall--4 .ec-logo--truewholesale { --lh: 20px; }
.ec-page--ai .ec-logowall--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ec-page--ai .ec-logowall--4 .ec-logo-cell:nth-child(n) { grid-column: auto; border-right: 1px solid var(--ec-rule); border-bottom: 1px solid var(--ec-rule); }
.ec-page--ai .ec-logowall--4 .ec-logo-cell:nth-child(even) { border-right: 0; }
.ec-page--ai .ec-logowall--4 .ec-logo-cell:nth-last-child(-n+2) { border-bottom: 0; }
@media (min-width: 768px) {
  .ec-page--ai .ec-logowall--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ec-page--ai .ec-logowall--4 .ec-logo-cell:nth-child(n) { border-right: 1px solid var(--ec-rule); border-bottom: 0; }
  .ec-page--ai .ec-logowall--4 .ec-logo-cell:last-child { border-right: 0; }
}

/* Services: the self-hosted stack card stands in for a screenshot */
.ec-page--ai .ai-stack { border-radius: 16px; background: radial-gradient(120% 90% at 0% 0%, rgba(0, 178, 107, .35), transparent 55%), #050B08; color: #fff; padding: 26px 26px 22px; box-shadow: 0 18px 40px rgba(0, 0, 0, .18); }
.ec-page--ai .ai-stack__h { margin: 0 0 14px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #6EE7B7; }
.ec-page--ai .ai-stack__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ec-page--ai .ai-stack__rows li { display: grid; grid-template-columns: 92px 140px minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.ec-page--ai .ai-stack__k { font-size: 13px; color: rgba(255, 255, 255, .62); }
.ec-page--ai .ai-stack__v { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.ec-page--ai .ai-stack__v img { width: 20px; height: 20px; }
.ec-page--ai .ai-stack__d { font-size: 13.5px; line-height: 1.35; color: rgba(255, 255, 255, .8); }
.ec-page--ai .ai-stack__f { margin: 14px 0 0; font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, .72); }
@media (max-width: 639px) {
  .ec-page--ai .ai-stack { padding: 20px 16px 18px; }
  .ec-page--ai .ai-stack__rows li { grid-template-columns: 1fr; gap: 4px; }
}

/* Platforms: the six tools fill their row instead of leaving an orphan. Industries uses the plain
   eCommerce grid and tiles (QA: it was squeezed 3-up on phones); its icons get eCommerce's sizes. */
.ec-page--ai .ec-tile__art img[src*="/icons/icon-ind-"] { display: block; width: min(40px, 31cqw); height: min(40px, 31cqw); max-width: none; max-height: none; }
@media (min-width: 640px) {
  .ec-page--ai .ec-platform-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .ec-page--ai .ec-platform-grid--6 .ec-tile { width: 100%; height: 132px; }
  .ec-page--ai .ec-tile--ind .ec-tile__art img[src*="/icons/icon-ind-"] { width: min(46px, 31cqw); height: min(46px, 31cqw); }
}
@media (min-width: 1024px) {
  .ec-page--ai .ec-platform-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ec-page--ai .ec-platform-grid--6 .ec-tile { height: auto; aspect-ratio: 1; }
}
@media (min-width: 1330px) {
  .ec-page--ai .ec-platform-grid--6 .ec-tile { width: 100%; height: auto; aspect-ratio: 1; }
}

/* Partnerships: three badges share one row; on phones the third spans the row */
@media (min-width: 768px) {
  .ec-page--ai .ec13-pcard--google, .ec-page--ai .ec13-pcard--microsoft { grid-column: span 2; min-height: 148px; padding-left: 40px; }
  .ec-page--ai .ec13-pcard--google .ec13-pcard__logo img, .ec-page--ai .ec13-pcard--microsoft .ec13-pcard__logo img { height: 50px; }
}
@media (min-width: 768px) and (max-width: 1279.98px) {
  .ec-page--ai .ec13-pcard--google, .ec-page--ai .ec13-pcard--microsoft { padding-left: 24px; }
}
@media (max-width: 767.98px) {
  .ec-page--ai .ec13-pcard--microsoft { grid-column: 1 / -1; }
}

/* Systems: one featured card + three more; the last one spans the row so the grid has no gap */
@media (min-width: 640px) {
  .ec-page--ai .ec-platform-row--sys .ec-syscard--wide { grid-column: 1 / -1; }
}

/* Hero photo grade: the eCommerce and SaaS hero photos ship with a dark green grade baked in; the AI
   photo is a neutral, brighter shot. Multiply a teal-green layer over it so the frame matches the other
   pages (measured: rendered mean RGB 60/77/70 vs eCommerce 60/78/71). */
.ec-page--ai .ec-hero__frame::after { content: ""; position: absolute; inset: 0; background: rgba(0, 110, 84, .42); mix-blend-mode: multiply; pointer-events: none; }

/* Services tabs: every left-hand frame (screenshots and the stack card) has the same box, so the
   three tabs line up. Images crop to it (object-fit: cover, anchored top) instead of setting the height. */
.ec-page--ai .ec-svc__media > .ec9-shot__frame { box-sizing: border-box; aspect-ratio: 4 / 5; width: 100%; overflow: hidden; }
.ec-page--ai .ec-svc__media > .ec9-shot__frame { display: flex; flex-direction: column; }
.ec-page--ai .ec-svc__media > .ec9-shot__frame > picture { display: block; flex: 1 1 0; min-height: 0; }
.ec-page--ai .ec-svc__media > .ec9-shot__frame img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
/* The stack card sits in the same browser frame as the screenshots and fills the space under its bar */
.ec-page--ai .ai-stack-frame > .ai-stack { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; border-radius: 0; box-shadow: none; overflow: hidden; }
@media (min-width: 640px) {
  .ec-page--ai .ec-svc__media > .ec9-shot__frame { aspect-ratio: 16 / 9; }
}
/* Phones: the screenshots use the same short 2:1 frame as the other service pages (QA: the tall
   chat window made this section unlike the rest). The stack card gets the same frame: see the
   compact phone layout at the end of this file. */
@media (max-width: 639.98px) {
  .ec-page--ai .ec-svc__media > .ec9-shot__frame { aspect-ratio: 2 / 1; }
  .ec-page--ai .ai-stack__rows { gap: 8px; }
  .ec-page--ai .ai-stack__rows li { padding: 10px 12px; gap: 2px; }
  .ec-page--ai .ai-stack__h { margin-bottom: 10px; }
  .ec-page--ai .ai-stack__f { margin-top: 10px; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .ec-page--ai .ai-stack { padding: 18px 20px 16px; }
  .ec-page--ai .ai-stack__h { margin-bottom: 10px; }
  .ec-page--ai .ai-stack__rows { gap: 8px; }
  .ec-page--ai .ai-stack__rows li { grid-template-columns: 80px 120px minmax(0, 1fr); gap: 8px; padding: 8px 12px; }
  .ec-page--ai .ai-stack__f { margin-top: 10px; }
}

/* How We Work, steps 3 and 4: own scenes (same blocks as the eCommerce scenes: cards, chips, pipe, ticks).
   New icons are files in img/ai/hwj/, drawn as masks like the shared ones. */
.ec-page--ai .hwj .i--chat { --ii: url("../img/ai/hwj/chat.svg"); }
.ec-page--ai .hwj .i--server { --ii: url("../img/ai/hwj/server.svg"); }
.ec-page--ai .hwj .i--flow { --ii: url("../img/ai/hwj/flow.svg"); }
.ec-page--ai .hwj .i--sliders { --ii: url("../img/ai/hwj/sliders.svg"); }
.ec-page--ai .hwj .ai2__ic { display: flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--gl); color: var(--gd); }
.ec-page--ai .hwj .ai2__ic .i { width: 18px; height: 18px; }
.ai2 { display: flex; flex-direction: column; height: 100%; }
.ai2 .lbl { margin-bottom: 12px; }
.ai2__opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ai2__opt { position: relative; display: block; padding: 14px; }
.ai2__opt .ai2__ic { margin-bottom: 12px; }
.ai2__opt b { display: block; font-size: 14px; line-height: 18px; }
.ai2__opt small { display: block; margin-top: 4px; font-size: 12px; line-height: 16px; color: rgba(0, 0, 0, .55); }
.ai2__opt.s1__pick { background: #fff; }
.ai2__flow { display: grid; grid-template-columns: 1fr 48px 1fr 48px 1fr; align-items: center; gap: 8px; margin-top: 18px; padding: 16px; }
.ai2__node { padding: 12px; border-radius: 10px; background: #F4F7F5; }
.ai2__node small { display: block; margin-bottom: 10px; font-size: 12px; font-weight: 600; color: rgba(0, 0, 0, .55); }
.ai2__node .sk + .sk { margin-top: 8px; }
.ai2__node--ai { background: var(--gl); }
.ai2__node--ai small { color: var(--gd); }
.ai2__node--ai .sk { background: #C6EAD7; }
.ai2 .s1__tags { margin-top: auto; }
.ai2 .s1__tags span { font-size: 12.5px; padding: 6px 11px; }

.ai3 { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; gap: 14px; height: 100%; }
.ai3__model { padding: 16px; }
.ai3__h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: 15px; }
.ai3__h span { padding: 2px 8px; border-radius: 6px; background: #F4F7F5; font-size: 11px; font-weight: 600; color: rgba(0, 0, 0, .55); }
.ai3__opt { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid var(--ln); font-size: 14px; color: rgba(0, 0, 0, .75); }
.ai3__r { position: relative; flex: none; width: 16px; height: 16px; border: 2px solid #C9D6CF; border-radius: 50%; }
.ai3__r::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--g); transform: scale(0); }
.hwj .is-active .ai3__opt--on { animation: hwjOptOn .3s ease 1.4s forwards; }
.hwj .is-active .ai3__opt--on .ai3__r { animation: hwjOptR .3s ease 1.4s forwards; }
.hwj .is-active .ai3__opt--on .ai3__r::after { animation: hwjPop .3s var(--ease) 1.5s forwards; }
@keyframes hwjOptOn { to { color: var(--gd); font-weight: 600; } }
@keyframes hwjOptR { to { border-color: var(--g); } }
.ai3__prompt { padding: 16px; border-radius: 12px; background: #0B1F16; }
.ai3__chip { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px; padding: 3px 10px; border-radius: 999px; background: rgba(59, 220, 154, .16); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #6EE7B7; }
.ai3__chip i { width: 6px; height: 6px; border-radius: 50%; background: #3BDC9A; animation: hwjPulse 1.6s infinite; }
.ai3__ln { display: block; width: 0; height: 7px; margin: 0 0 11px var(--x, 0); border-radius: 4px; background: var(--c, rgba(255, 255, 255, .25)); }
.hwj .is-active .ai3__ln { animation: hwjType .5s steps(10, end) calc(var(--d) * 140ms + 300ms) forwards; }
.ai3__tune { grid-column: 1 / -1; padding: 16px; }
.ai3__th { display: flex; align-items: center; gap: 12px; }
.ai3__th b { display: block; font-size: 14px; line-height: 18px; }
.ai3__th small { font-size: 12px; color: rgba(0, 0, 0, .55); }
.ai3__th > div { flex: 1; min-width: 0; }
.ai3__done { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--gl); font-size: 13px; font-weight: 600; color: var(--gd); opacity: 0; }
.hwj .ai3__done .i { width: 13px; height: 13px; }
.hwj .is-active .ai3__done { animation: hwjIn .4s ease 3.2s both; }
.ai3__bar { height: 8px; margin-top: 14px; border-radius: 4px; background: var(--sk); overflow: hidden; }
.ai3__bar i { display: block; height: 100%; border-radius: 4px; background: var(--g); transform: scaleX(0); transform-origin: left center; }
.hwj .is-active .ai3__bar i { animation: hwjBar 2.2s ease-in-out 1s forwards; }
@keyframes hwjBar { to { transform: scaleX(1); } }
.ai2__opt.s1__pick .ai2__ic { background: #fff; }
.ai2__flow { margin-top: 22px; padding: 22px 18px; }
.ai2__node { padding: 16px 14px; }
.ai2__node .sk { height: 9px; }
.ai2__node .sk + .sk { margin-top: 10px; }
.ai2 .s1__tags { margin-top: 22px; }
.ai3__opt { padding: 15px 0; }
.ai3__ln { height: 8px; margin-bottom: 15px; }
/* …but the frame's "images fill the frame" rules must not reach the stack's 20px tool logos */
.ec-page--ai .ec-svc__media > .ai-stack-frame .ai-stack__v img { display: inline-block; flex: none; width: 20px; height: 20px; object-fit: contain; }

/* Our Work: the case cards use eCommerce's layout as is (QA: every service page matches). */
.ec-page--ai .ec-tile__client { color: #fff; }

/* Contact: "Rather pick a time yourself?" booking link under What happens next */
.ec-page--ai .pv-cal { margin-top: 32px; padding-top: 24px; max-width: 420px; border-top: 1px solid rgba(255, 255, 255, .16); }
.ec-page--ai .pv-cal__q { margin: 0; font-size: 15px; line-height: 24px; color: rgba(255, 255, 255, .78); }
.ec-page--ai .pv-cal__link { display: inline-block; margin-top: 6px; font-size: 16px; font-weight: 600; color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ec-page--ai .pv-cal__link:hover { color: #6EE7B7; }
.ec-page--ai .pv-cal__link:focus-visible { outline: 2px solid #6EE7B7; outline-offset: 3px; border-radius: 4px; }
.ec-page--ai .pv-cal__who { margin: 6px 0 0; font-size: 14px; line-height: 21px; color: rgba(255, 255, 255, .72); }

/* tighter gaps (as on eCommerce): next section after the services stage, partnerships -> platforms, platforms intro -> content */
.ec-page--ai #services + * { position: relative; z-index: 6; }   /* pulled up under the stage's empty lower part (JS negative margin): paint over it */
.ec-page--ai .ec13-pa { padding-bottom: calc(var(--ec-sec-y) * .5); }
.ec-page--ai .ec-xp > .ec-prows { margin-top: 0; }

/* Closing CTA logo strip: AI client logos (sizes per logo; the eCommerce ones are tuned for its own order) */
.ec-page.ec-page--ai .ec14-logos li:nth-child(n) img { height: 20px; max-width: 110px; }
.ec-page.ec-page--ai .ec14-logos li:nth-child(4n+2) img { height: 22px; }
.ec-page.ec-page--ai .ec14-logos li:nth-child(4n+4) img { height: 24px; }

/* Phones: the stack card fits the same 2:1 frame as the screenshots. The four tools become a 2x2
   grid of logo + name, and the one-line descriptions and footnote are hidden (the card is role="img",
   its aria-label still names every tool). */
@media (max-width: 639.98px) {
  .ec-page--ai .ec-svc__media > .ai-stack-frame > .ai-stack { justify-content: center; padding: 8px 12px; }
  .ec-page--ai .ec-svc__media > .ai-stack-frame .ai-stack__h { margin: 0 0 6px; font-size: 11px; line-height: 1.2; }
  .ec-page--ai .ec-svc__media > .ai-stack-frame .ai-stack__rows { grid-template-columns: 1fr 1fr; gap: 6px; }
  .ec-page--ai .ec-svc__media > .ai-stack-frame .ai-stack__rows li { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: 4px; padding: 6px 8px; min-width: 0; }
  .ec-page--ai .ec-svc__media > .ai-stack-frame .ai-stack__k { font-size: 10px; line-height: 1.2; white-space: nowrap; }
  .ec-page--ai .ec-svc__media > .ai-stack-frame .ai-stack__v { font-size: 12.5px; line-height: 1.25; gap: 5px; min-width: 0; }
  .ec-page--ai .ec-svc__media > .ai-stack-frame .ai-stack__v img { width: 16px; height: 16px; }
  .ec-page--ai .ec-svc__media > .ai-stack-frame .ai-stack__d,
  .ec-page--ai .ec-svc__media > .ai-stack-frame .ai-stack__f { display: none; }
}
/* Narrow phones: no room for the category labels beside the names, so the tiles show logo + name */
@media (max-width: 379.98px) {
  .ec-page--ai .ec-svc__media > .ai-stack-frame .ai-stack__k { display: none; }
  .ec-page--ai .ec-svc__media > .ai-stack-frame .ai-stack__rows li { justify-content: flex-end; } /* row-reverse: flex-end is the left edge */
}