/*
 * AI SEO Services landing page — the sections only this page renders.
 *
 * Most of this page is already built: landing.css supplies the hero, the
 * feature grid and the rail; seo-reseller.css supplies the definition band and
 * the photo card the industries rail and the service grid both use; style.css
 * supplies .stats-card, .band and the FAQ accordion. This sheet adds the four
 * sections nothing else on the site has an equivalent of — the photo service
 * grid, the numbered process timeline, the AI platform panel and the
 * four-column comparison table — plus the per-section retunes the design asks
 * for on the reused components.
 *
 * Scoped to .ais-page so nothing here can reach another template.
 */
.ais-page {
  --ais-lav: #eeeffb;
  --ais-sky: #e6f4fe;
  --ais-ink: #0b1020;
}

/* ---------- Shared eyebrow pill ----------
   The theme's .eyebrow with the design's blue label and a leading glyph. Three
   sections render it, so it is defined once rather than per section. */
.ais-page .ais-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  color: var(--blue);
  background: #eef3ff;
  border-color: #dde7ff;
}

/* .center-pill centres by going display:block with an auto inline margin; this
   pill is inline-flex, which wins the display and left the pill ranged left.
   flex + max-content keeps the row layout and lets the auto margin work. */
.ais-page .ais-eyebrow.center-pill {
  display: flex;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
}

.ais-page .ais-eyebrow-ico {
  display: inline-flex;
}

.ais-page .ais-eyebrow-ico .lp-icon {
  width: 15px;
  height: 15px;
}

/* ---------- Hero ---------- */
/* The owner's hero-bg.png sits UNDER .lp-hero's --lp-soft colour rather than
   replacing it, so the band still reads correctly while the image loads and at
   viewports taller than the 1518x1036 artwork. Same arrangement as .os-hero. */
.ais-page .ais-hero {
  background-color: var(--lp-soft);
  background-image: url("../images/ai-seo/hero-bg.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

/* the "#1" ahead of the title */
.ais-page .ais-hero-rank {
  color: var(--blue);
}

/* The spec's H1 is a full sentence, not the mock's three words, so it wraps to
   three or four lines by design. Sized down from the shared 68px because at
   that size the sentence pushed the artwork off the first screen. */
.ais-page .ais-hero .lp-hero-title {
  font-size: clamp(30px, 3.2vw, 46px);
  margin-bottom: 16px;
}

/* The standfirst between the H1 and the body copy. Heavier and darker than
   .lp-hero-text so the two do not read as one block of grey. */
.ais-page .ais-hero-sub {
  color: #2c3444;
  font-size: clamp(16px, 1.35vw, 20px);
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 18px;
}

/* One column of plain rows, not the two-up tick grid the other landing pages
   use: these labels are long enough that two across wraps every one of them. */
.ais-page .ais-hero-points {
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.ais-page .ais-hero-points li {
  gap: 16px;
  font-size: 16.5px;
  color: #2c3444;
}

.ais-page .ais-hero-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #e4edff;
  color: var(--blue);
}

.ais-page .ais-hero-ico .lp-icon {
  width: 21px;
  height: 21px;
}

/* CTA and the social-proof chip share a row while there is width for it, and
   the chip drops under the button when there is not. */
.ais-page .ais-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px 28px;
}

.ais-page .ais-hero-proof {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 10px 22px 10px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 22px rgba(13, 21, 38, 0.08);
}

.ais-page .ais-hero-faces {
  display: inline-flex;
}

/* overlapped, with a ring so the stack reads as separate faces */
.ais-page .ais-hero-faces img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #fff;
  object-fit: cover;
}

.ais-page .ais-hero-faces img + img {
  margin-left: -12px;
}

.ais-page .ais-hero-proof strong {
  display: block;
  font-size: 15px;
  color: var(--ais-ink);
}

.ais-page .ais-hero-proof-text {
  display: block;
  font-size: 12.5px;
  color: #6b7280;
}

/* ---------- Stats ---------- */
/* The design runs the figures in brand blue and the labels in sentence case;
   the shared component is ink-on-white and uppercases its labels. */
.ais-page .ais-stats {
  background: var(--white);
}

.ais-page .ais-stats .stat-num {
  color: var(--blue);
  font-size: clamp(30px, 3vw, 40px);
  line-height: 1.1;
}

.ais-page .ais-stats .stat-lbl {
  text-transform: none;
  font-weight: 600;
  font-size: 14px;
  color: #4b5565;
}

/* ---------- Search has changed ----------
   The SEO Reseller definition band with its dressing removed — the dot grid,
   the offset frame behind the photo and the heading's accent rule all belong
   to that page's treatment, not to this one. The heading is also lifted out of
   the copy column and centred over both, which is why the section renders two
   .container blocks rather than one. */
.ais-page .ais-whatis {
  background: var(--white);
  padding-block: clamp(40px, 5vw, 70px) clamp(50px, 6vw, 90px);
}

.ais-page .ais-whatis::before,
.ais-page .ais-whatis::after {
  content: none;
}

.ais-page .ais-whatis .sr-whatis-frame::before,
.ais-page .ais-whatis .sr-whatis-copy .heading-main::after {
  content: none;
}

/* Gated at the breakpoint on purpose: seo-reseller.css stacks this band below
   960px by setting .sr-whatis-copy to display:contents, and an ungated
   two-column rule here is the more specific selector — the loose grid items
   would then lay themselves out two across on a phone. */
@media (min-width: 961px) {
  .ais-page .ais-whatis .sr-whatis-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(36px, 6vw, 90px);
    align-items: start;
  }

  /* The copy holds while the photograph scrolls past. It is the SHORTER column
     here — the square 1254x1254 artwork caps at 590px and the three paragraphs
     run under that — so there is real travel, which is what the collab column
     on the Outsource SEO page lacks (see that page's comment before copying
     this). Same offset as .faq-left, which clears the fixed header pill.

     Gated with the two-column rule on purpose: stacked, the copy is its own
     grid row with nothing to sit still through, and seo-reseller.css sets
     .sr-whatis-copy to display:contents below 960px, which would make position
     do nothing at all. */
  .ais-page .ais-whatis .sr-whatis-copy {
    position: sticky;
    top: clamp(96px, 9vw, 124px);
    align-self: start;
  }
}

.ais-page .ais-whatis .sr-whatis-frame {
  max-width: min(100%, 590px);
  border-radius: 18px;
  overflow: hidden;
}

/* The Reseller band lifts each paragraph's opening line into a lede. That is
   its treatment, not this design's — here all three paragraphs are body copy,
   and with three of them the ::first-line rule bolded the top of every one. */
.ais-page .ais-whatis .sr-whatis-copy p::first-line {
  color: inherit;
  font-weight: 400;
}

/* .sr-whatis-copy p is margin: 0 because that band carries a single paragraph.
   Three of them need the gap back. */
.ais-page .ais-whatis .sr-whatis-copy p {
  color: #5c6779;
  line-height: 1.85;
  margin-bottom: 22px;
}

.ais-page .ais-whatis .sr-whatis-copy p:last-child {
  margin-bottom: 0;
}

/* ---------- Why businesses are moving ---------- */
/* The shared .lp-feature-icon is a tinted coral squircle; the design here is a
   solid blue disc.

   The disc is load-bearing, not decoration: the owner's why-*.png are PURE
   WHITE line art on transparent, exactly like the ORM page's what-*.png set.
   They are invisible on any light surface — a pale tint was tried here and the
   icons disappeared. Never "simplify" this fill away. */
.ais-page .ais-why {
  background: var(--white);
}

.ais-page .ais-why .lp-feature-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
}

.ais-page .ais-why .lp-feature-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.ais-page .ais-why .lp-feature {
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.ais-page .ais-why .lp-feature-icon .lp-icon {
  width: 30px;
  height: 30px;
}

/* ---------- Our AI SEO services ----------
   Twelve illustrated cards, four across and three down. The card itself is
   .sr-industry-card from seo-reseller.css — photo, scrim, centred white label
   — and stays SQUARE here, matching the supplied 1254x1254 artwork, so the
   photo is never cropped by the frame. What this adds is the grid, the hover
   that lifts the description into view, and the deeper scrim it needs. */
.ais-page .ais-services {
  background: var(--ais-lav);
  padding-block: clamp(56px, 6.5vw, 96px);
}

.ais-page .ais-service-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.6vw, 26px);
  margin-top: clamp(32px, 4vw, 52px);
}

.ais-page .ais-service {
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  transition: var(--lp-lift);
}

.ais-page .ais-service:hover {
  transform: translateY(-6px);
  box-shadow: var(--lp-card-shadow-hover);
}

/* .sr-industry-card's scrim fades in only over the bottom 55%, which is enough
   for a one-line label and nowhere near enough for a paragraph. Deepened, and
   deepened again on hover so the copy has something to sit on. */
.ais-page .ais-service::after {
  background: linear-gradient(180deg, rgba(6, 12, 30, 0) 30%, rgba(6, 12, 30, 0.82) 100%);
  transition: background 0.34s ease;
}

.ais-page .ais-service:hover::after,
.ais-page .ais-service:focus-within::after {
  background: linear-gradient(180deg, rgba(6, 12, 30, 0.35) 0%, rgba(6, 12, 30, 0.88) 100%);
}

.ais-page .ais-service-body {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 20px 22px;
}

.ais-page .ais-service h3 {
  padding: 0;
  font-size: clamp(16px, 1.25vw, 20px);
  line-height: 1.3;
}

/* The description is in the markup and in the accessibility tree at all times;
   only its box collapses. grid-template-rows 0fr -> 1fr is what makes that
   animatable — height:auto is not a transitionable value, and display:none
   would take the copy out of the page for search engines and screen readers,
   which is the wrong trade on a page about being machine-readable. */
.ais-page .ais-service-body p {
  display: grid;
  grid-template-rows: 0fr;
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 13.5px;
  line-height: 1.55;
  text-align: center;
  opacity: 0;
  transition: grid-template-rows 0.34s ease, opacity 0.28s ease, margin-top 0.34s ease;
}

/* the row is the animated box, so the text itself needs the overflow clip */
.ais-page .ais-service-body p > span {
  overflow: hidden;
}

.ais-page .ais-service:hover .ais-service-body p,
.ais-page .ais-service:focus-within .ais-service-body p {
  grid-template-rows: 1fr;
  margin-top: 10px;
  opacity: 1;
}

/* Nothing to reveal on a touch screen — there is no hover — so the copy is
   simply always shown there. Same for anyone who asked motion to stop. */
@media (hover: none) {
  .ais-page .ais-service-body p {
    grid-template-rows: 1fr;
    margin-top: 10px;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ais-page .ais-service,
  .ais-page .ais-service::after,
  .ais-page .ais-service-body p {
    transition: opacity 0.28s ease;
  }

  .ais-page .ais-service:hover {
    transform: none;
  }
}

/* ---------- Call-to-action bands ----------
   Both bands are the theme's .band. The design's is a flatter, cooler tint
   than the front page's blue-to-cyan sweep. */
.ais-page .ais-band {
  background: linear-gradient(180deg, #e9f4fe 0%, #e2f1fd 100%);
}

/* .band's two blurred white glows are ::before/::after, so they paint after
   .container and over it. The front page never noticed — its band copy is
   narrow enough to sit clear of both. These headings run the full measure and
   the top-right glow washed out their last words. */
.ais-page .ais-band .container {
  z-index: 1;
}

.ais-page .ais-band .trusted-heading {
  font-size: clamp(30px, 4vw, 52px);
}

.ais-page .ais-band .trusted-lead {
  font-size: clamp(16px, 1.3vw, 19px);
  max-width: 1000px;
  margin-bottom: 18px;
}

.ais-page .ais-band .trusted-lead:last-of-type {
  margin-bottom: 40px;
}

/* ---------- Process ----------
   Six steps on a dashed spine. Not the shared .flow: that is a four-stop
   horizontal row with artwork per stop, and this is a vertical stack whose
   numeral sits outside the card, on the spine. */
.ais-page .ais-process {
  background: var(--white);
  padding-block: 0 clamp(50px, 6vw, 90px);
}

.ais-page .ais-process-panel {
  border-radius: 22px;
  padding: clamp(40px, 5vw, 72px) clamp(20px, 4vw, 64px) clamp(46px, 5vw, 80px);
  background: radial-gradient(120% 80% at 15% 0%, #f3f6ff 0%, rgba(243, 246, 255, 0) 60%),
    radial-gradient(90% 70% at 88% 8%, #f4f0ff 0%, rgba(244, 240, 255, 0) 55%),
    linear-gradient(180deg, #fbfcff 0%, #f4f7ff 100%);
}

.ais-page .ais-process .heading-main {
  font-size: clamp(30px, 4vw, 56px);
  margin-bottom: 20px;
}

.ais-page .ais-process .lp-lead {
  margin-bottom: clamp(34px, 4vw, 56px);
}

.ais-page .ais-steps {
  display: grid;
  gap: clamp(16px, 1.8vw, 26px);
  max-width: 1040px;
  margin-inline: auto;
}

/* The numeral column, the dashed run out to the card, and the card. The spine
   is drawn on the <li> rather than on the <ol> so it can stop at the last
   step without a :last-child override on a full-height pseudo-element. */
.ais-page .ais-step {
  position: relative;
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  gap: clamp(16px, 2vw, 34px);
  align-items: center;
}

.ais-page .ais-step::before {
  content: "";
  position: absolute;
  left: 33px;
  top: 50%;
  bottom: calc(-1 * clamp(16px, 1.8vw, 26px) - 50%);
  border-left: 2px dashed #c6d6f5;
}

.ais-page .ais-step:last-child::before {
  content: none;
}

/* dashed run from the numeral to the card edge */
.ais-page .ais-step::after {
  content: "";
  position: absolute;
  left: 66px;
  top: 50%;
  width: clamp(16px, 2vw, 34px);
  border-top: 2px dashed #c6d6f5;
}

.ais-page .ais-step-num {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-family: var(--heading-font);
  font-size: 25px;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(22, 104, 255, 0.28);
}

.ais-page .ais-step-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(18px, 2vw, 34px);
  background: var(--white);
  border-radius: 16px;
  padding: clamp(20px, 2.4vw, 30px) clamp(22px, 2.6vw, 38px);
  box-shadow: 0 10px 30px rgba(13, 21, 38, 0.06);
  transition: var(--lp-lift);
}

.ais-page .ais-step-card:hover {
  transform: translateX(5px);
  box-shadow: 0 16px 38px rgba(13, 21, 38, 0.1);
}

.ais-page .ais-step-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(74px, 7vw, 100px);
  height: clamp(74px, 7vw, 100px);
  border-radius: 50%;
  background: #eaf1ff;
}

.ais-page .ais-step-ico img {
  width: 52%;
  height: auto;
}

/* the blue rule between the icon and the copy */
.ais-page .ais-step-body {
  border-left: 2px solid var(--blue);
  padding-left: clamp(16px, 1.8vw, 26px);
}

.ais-page .ais-step-body h3 {
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 700;
  color: var(--ais-ink);
  margin-bottom: 8px;
}

.ais-page .ais-step-body p {
  margin: 0;
  color: #5c6779;
  font-size: 15.5px;
  line-height: 1.65;
}

.ais-page .ais-process-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: max-content;
  max-width: 100%;
  margin: clamp(28px, 3vw, 42px) auto 0;
  padding: 12px 26px;
  border-radius: 999px;
  background: #e9f0ff;
  color: var(--blue);
  font-size: 15px;
  font-weight: 600;
}

.ais-page .ais-process-note-ico .lp-icon {
  width: 19px;
  height: 19px;
}

/* ---------- AI platforms ---------- */
.ais-page .ais-platforms {
  background: linear-gradient(180deg, #fbfcff 0%, #f4f6fd 100%);
}

.ais-page .ais-platforms-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
  background: var(--white);
  border-radius: 24px;
  padding: clamp(30px, 4vw, 62px);
  box-shadow: 0 18px 50px rgba(13, 21, 38, 0.07);
}

/* The artwork is 614x680. .ais-platforms-art is a 0.8fr grid column, which at
   1600px asks for ~470px and at 2560px for ~790px — so left at width:100% it
   was being upscaled past its own resolution and towered over the cards beside
   it. Capped at its native width and centred in whatever the column leaves. */
.ais-page .ais-platforms-art img {
  display: block;
  width: 100%;
  max-width: 440px;
  height: auto;
  margin-inline: auto;
}

.ais-page .ais-platforms .heading-main {
  font-size: clamp(28px, 3.2vw, 46px);
  margin-bottom: 16px;
}

.ais-page .ais-platforms-text {
  color: #5c6779;
  line-height: 1.8;
  margin-bottom: clamp(24px, 2.6vw, 36px);
}

.ais-page .ais-platform-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.5vw, 22px);
  /* the "1." … "6." the design prefixes each title with. A counter rather than
     PHP so reordering the array renumbers the list. */
  counter-reset: ais-platform;
}

.ais-page .ais-platform {
  counter-increment: ais-platform;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  background: var(--white);
  border: 1px solid var(--lp-card-line);
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: var(--lp-card-shadow);
  transition: var(--lp-lift);
}

.ais-page .ais-platform:hover {
  transform: translateY(-4px);
  border-color: var(--lp-card-line-hover);
  box-shadow: var(--lp-card-shadow-hover);
}

.ais-page .ais-platform-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #f4f6fb;
}

.ais-page .ais-platform-ico img {
  width: 32px;
  height: 32px;
  border-radius: 9px;
}

.ais-page .ais-platform h3 {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--ais-ink);
  margin-bottom: 7px;
}

.ais-page .ais-platform h3::before {
  content: counter(ais-platform) ". ";
}

.ais-page .ais-platform p {
  margin: 0;
  color: #5c6779;
  font-size: 14.5px;
  line-height: 1.6;
}

/* ---------- Industries ---------- */
/* The rail card is .sr-industry-card unchanged. What differs is that this
   design carries no outlined numeral over the card's top edge, so the 33px
   of clearance .sr-industry reserves for one is dead space here. */
.ais-page .ais-industries {
  background: var(--white);
}

.ais-page .ais-industries .sr-industry {
  padding-top: 0;
}

/* Square, matching the supplied 2000x2000 artwork — this is .sr-industry-card's
   own default, restated here because the first pass overrode it to 5 / 4 for
   the placeholder crops. */
.ais-page .ais-industries .sr-industry-card {
  aspect-ratio: 1 / 1;
  border-radius: 20px;
}

.ais-page .ais-industries .lp-lead {
  margin-bottom: clamp(30px, 3.5vw, 48px);
}

/* ---------- What makes iApp stronger ---------- */
.ais-page .ais-compare {
  background: linear-gradient(180deg, #f2f7ff 0%, #eef2fd 100%);
  padding-block: clamp(56px, 6.5vw, 96px);
}

.ais-page .ais-compare .heading-main {
  font-size: clamp(28px, 3.6vw, 50px);
}

/* Four columns of claims do not fit a phone, and squeezing them makes the
   table unreadable rather than smaller — so it keeps its width and scrolls.
   tabindex on the wrapper is what makes that scroller reachable by keyboard. */
.ais-page .ais-compare-scroll {
  margin-top: clamp(32px, 4vw, 52px);
  /* Containing block for the ticks' .screen-reader-text, which is
     position:absolute !important. Without this it resolves against an ancestor
     outside the scroller, escapes its clip entirely, and every hidden
     "Included" label out at x=1700 stretched the document to 745px on a 390px
     phone — the table itself scrolled correctly the whole time. */
  position: relative;
  overflow-x: auto;
  border-radius: var(--lp-card-r);
  background: var(--white);
  border: 1px solid var(--lp-card-line);
  box-shadow: 0 14px 40px rgba(13, 21, 38, 0.07);
}

.ais-page .ais-compare-scroll:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.ais-page .ais-compare-table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
  text-align: center;
}

.ais-page .ais-compare-table th,
.ais-page .ais-compare-table td {
  padding: 13px clamp(14px, 1.6vw, 26px);
  border-bottom: 1px solid #eef1f7;
  vertical-align: middle;
  font-size: 15px;
}

/* the area names are the table's spine, so they range left */
.ais-page .ais-compare-table tbody th {
  text-align: left;
  font-weight: 600;
  color: #2c3444;
  white-space: nowrap;
}

.ais-page .ais-compare-table thead th {
  padding-block: 20px;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--ais-ink);
}

.ais-page .ais-compare-table tbody tr:last-child th,
.ais-page .ais-compare-table tbody tr:last-child td {
  border-bottom: 0;
}

/* zebra, so the eye can track a row across four columns */
.ais-page .ais-compare-table tbody tr:nth-child(even) {
  background: #fafbfe;
}

/* A hairline between every column, so each one reads as its own lane rather
   than as four values floating on a row. The iApp column overrides its own
   pair below with the heavier blue rule. */
.ais-page .ais-compare-table th:not(:last-child),
.ais-page .ais-compare-table td:not(:last-child) {
  border-right: 1px solid #eef1f7;
}

/* The iApp column: a filled blue header and a tint down the body. The vertical
   rules that box it are on the cells rather than on a spanning pseudo-element,
   because a <td> cannot host one that reaches out of its own row.

   The type selector is load-bearing. `.is-us` alone is (0,3,0) and the hairline
   rule above is (0,3,1) — `:not()` counts as a class and `td` adds the type —
   so the hairline WON the right-hand edge and the column was drawn blue on the
   left and grey on the right. Qualifying with th/td ties the specificity at
   (0,3,1), and this rule is later in source, so it takes both edges. */
.ais-page .ais-compare-table th.is-us,
.ais-page .ais-compare-table td.is-us {
  background: rgba(22, 104, 255, 0.06);
  border-inline: 2px solid rgba(22, 104, 255, 0.45);
}

.ais-page .ais-compare-table thead .is-us {
  background: linear-gradient(135deg, #3d86ff 0%, #1668ff 100%);
  color: #fff;
  border-radius: 12px 12px 0 0;
  border-inline-color: transparent;
}

/* The blue rule closes across the bottom, but the corners stay square: rounding
   them pulled the vertical rules away from the last row's baseline and left the
   column reading as a detached pill floating inside the table. The rounded cap
   at the head of the column is enough to mark it out. */
.ais-page .ais-compare-table tbody tr:last-child .is-us {
  border-bottom: 2px solid rgba(22, 104, 255, 0.45);
  border-radius: 0;
}

.ais-page .ais-compare-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #22b573;
  color: #fff;
}

/* the iApp column's ticks are brand blue, everyone else's are green */
.ais-page .ais-compare-table .is-us .ais-compare-tick {
  background: var(--blue);
}

.ais-page .ais-compare-tick .lp-icon {
  width: 14px;
  height: 14px;
  stroke-width: 3;
}

.ais-page .ais-compare-pill {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  background: #fdf3e0;
  color: #96690f;
  font-size: 13px;
  font-weight: 600;
}

/* ---------- Responsive ----------
   Only what this sheet's own sections need; every shared component collapses
   in landing.css and seo-reseller.css already. */
@media (max-width: 1280px) {
  .ais-page .ais-service-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .ais-page .ais-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ais-page .ais-platforms-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .ais-page .ais-platforms-art {
    max-width: 480px;
    margin-inline: auto;
  }
}

@media (max-width: 960px) {
  /* landing.css dissolves .lp-hero-copy with display:contents here so the
     artwork can sit between the H1 and the body copy, then orders the title to
     -2 and the art to -1. The standfirst is a child of that dissolved wrapper,
     so it kept source order and landed BELOW the artwork, away from the
     headline it belongs to. Shifting the pair up one keeps
     title / standfirst / art / body. */
  .ais-page .ais-hero .lp-hero-title {
    order: -3;
  }

  .ais-page .ais-hero-sub {
    order: -2;
  }
}

@media (max-width: 860px) {
  .ais-page .ais-platform-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The numeral stays beside the card but loses its column width and both
     dashed rules: the horizontal run has no room left, and a spine with
     nothing running along it reads as a stray line. Stacking the numeral over
     the card instead was tried and dropped — it lands on the icon plate. */
  .ais-page .ais-step {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
  }

  .ais-page .ais-step::before,
  .ais-page .ais-step::after {
    content: none;
  }

  .ais-page .ais-step-num {
    width: 48px;
    height: 48px;
    font-size: 18px;
  }
}

@media (max-width: 640px) {
  .ais-page .ais-service-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ais-page .ais-step-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  /* the rule flips to the top edge once the icon is above the copy rather
     than beside it */
  .ais-page .ais-step-body {
    border-left: 0;
    border-top: 2px solid var(--blue);
    padding-left: 0;
    padding-top: 16px;
  }

  .ais-page .ais-hero-actions {
    gap: 18px;
  }

  /* The social-proof chip is hidden on a phone at the owner's request. display
     rather than visibility or opacity: on one column it is a full row of its
     own, so anything that leaves the box in flow leaves its gap behind. */
  .ais-page .ais-hero-proof {
    display: none;
  }
}