/* ===========================================================================
   Repositioning sections (Oct 2026): growth loop, compliance, UGC wall.

   Every colour here comes from the variables already defined in styles.css —
   nothing introduces a new hue. The palette is the site's; these sections
   only arrange it.
   =========================================================================== */

/* ---------- GROWTH LOOP ---------- */
.loop__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  counter-reset: stage;
}
.loop__stage {
  position: relative;
  background: #fff;
  border: 1px solid var(--line, #ECEAF3);
  border-radius: 18px;
  padding: 22px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.loop__stage:hover {
  transform: translateY(-4px);
  border-color: var(--brand-200);
  box-shadow: 0 18px 40px -24px rgba(80, 27, 159, .45);
}
.loop__art {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--brand-50);
  display: grid;
  place-items: center;
  margin-bottom: 10px;
}
.loop__art svg { display: block; }
.gl-fill   { fill: var(--brand-200); }
.gl-accent { fill: var(--brand-500); }
.gl-stroke { fill: none; stroke: var(--brand-600); stroke-width: 2; stroke-linejoin: round; }
.gl-line   { fill: none; stroke: var(--brand-400); stroke-width: 2; stroke-linecap: round; }
.gl-line-thick {
  fill: none; stroke: var(--brand-600); stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round;
}

.loop__label {
  align-self: flex-start;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand-700);
  background: var(--brand-50);
  border-radius: 99px;
  padding: 4px 10px;
}
.loop__stage h3 { font-size: 18px; margin: 2px 0 0; }
.loop__stage p { margin: 0; color: var(--ink-500); font-size: 14.5px; line-height: 1.55; }

.loop__foot {
  margin-top: 28px;
  text-align: center;
  color: var(--ink-500);
  font-size: 15px;
}
.loop__foot span { color: var(--brand-500); font-size: 18px; margin-right: 6px; }

@media (max-width: 1040px) {
  .loop__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .loop__grid { grid-template-columns: 1fr; }
}

/* ---------- COMPLIANCE ----------
   Two facing lists, ruled rather than boxed, with the note promoted into
   the space beside the heading. */
/* Closes the section under the two lists. */
.comply__note {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 56px;
  padding: 18px 22px;
  border-radius: 14px;
  background: var(--brand-50);
}
.comply__note p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-700);
}
.comply__shield { width: 26px; height: 26px; flex: 0 0 auto; }
.comply__shield path {
  fill: none;
  stroke: var(--brand-500);
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.comply__shield .tick { stroke-width: 2; stroke-linecap: round; }

.comply__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}
.comply__col { padding-right: 44px; }
.comply__col + .comply__col {
  border-left: 1px solid var(--ink-100);
  padding-right: 0;
  padding-left: 44px;
}

.comply__col h3 {
  margin: 0 0 18px;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-800);
}

.comply__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.comply__col li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-700);
}
.comply__col svg {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The marks carry the contrast, so the second column needs no box to read
   as the opposite of the first. */
.comply__col--yes svg { stroke: var(--brand-600); }
.comply__col--no svg { stroke: var(--ink-300); }
.comply__col--no li { color: var(--ink-500); }

@media (max-width: 760px) {
  .comply__note { align-items: flex-start; }
  .comply__cols { grid-template-columns: minmax(0, 1fr); }
  .comply__col { padding-right: 0; }
  .comply__col + .comply__col {
    border-left: 0;
    border-top: 1px solid var(--ink-100);
    padding-left: 0;
    padding-top: 26px;
    margin-top: 26px;
  }
}

/* ---------- UGC WALL ---------- */
.ugc__wall {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.ugc__clip { display: flex; flex-direction: column; gap: 10px; }
.ugc__poster {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--ink-900, #260F4F);
  transition: transform .25s ease, box-shadow .25s ease;
}
.ugc__poster img { object-fit: cover; }
.ugc__poster video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Darkens the photograph so the play glyph and the chips stay readable
   whatever the image underneath. */
.ugc__poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14,10,34,.34), rgba(14,10,34,.12) 45%, rgba(14,10,34,.5));
}
.ugc__play, .ugc__kind, .ugc__len { position: relative; z-index: 1; }
.ugc__kind { position: absolute; }
.ugc__len { position: absolute; }
.ugc__clip:hover .ugc__poster {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px -24px rgba(38, 15, 79, .6);
}
.ugc__play { width: 44px; height: 44px; }
.ugc__play circle { fill: rgba(255,255,255,.18); stroke: rgba(255,255,255,.7); stroke-width: 1.5; }
.ugc__play path { fill: #fff; }
.ugc__kind,
.ugc__len {
  position: absolute;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: #fff;
  background: rgba(14, 10, 34, .42);
  padding: 3px 8px;
  border-radius: 99px;
  backdrop-filter: blur(4px);
}
.ugc__kind { top: 10px; left: 10px; }
.ugc__len  { bottom: 10px; right: 10px; }
.ugc__meta { display: flex; flex-direction: column; gap: 1px; padding-inline: 2px; }
.ugc__creator { font-size: 14px; font-weight: 600; color: var(--ink-800); }
.ugc__niche { font-size: 12.5px; color: var(--ink-500); }

.ugc__formats {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.ugc__formats-label {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-right: 4px;
}

@media (max-width: 1040px) { .ugc__wall { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .ugc__wall { grid-template-columns: repeat(2, 1fr); } }

/* ---------- HEADLINE WORD ROTATOR ---------- */
/* Grow on [Amazon → Walmart → Shopify → TikTok Shop → Target] …
   Every word sits in the same grid cell, so the box is as wide as the widest
   one and nothing after it shifts while the cycle runs. */
.rotator {
  display: inline-grid;
  vertical-align: baseline;
  text-align: left;
}
.rotator__stack {
  display: inline-grid;
  grid-template-areas: "word";
  overflow: hidden;
  /* Room for the slide without clipping descenders. */
  padding-block: 0.08em;
  margin-block: -0.08em;
}
.rotator__word {
  grid-area: word;
  color: var(--brand-500);
  white-space: nowrap;
  opacity: 0;
  animation-name: word-cycle;
  animation-timing-function: cubic-bezier(.22, .61, .36, 1);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

/* One shared cycle split three ways: rise in, hold, fall out, wait.
   The percentages and the length of hero.rotatingWords are coupled — a word
   occupies 100/n% of the cycle, so changing the list means changing these.
   Three words: each holds for a third, out by 33.3%. */
@keyframes word-cycle {
  0%    { opacity: 0; transform: translateY(0.5em); }
  3%    { opacity: 1; transform: translateY(0); }
  31%   { opacity: 1; transform: translateY(0); }
  37%   { opacity: 0; transform: translateY(-0.5em); }
  100%  { opacity: 0; transform: translateY(-0.5em); }
}

/* Reduced motion: no cycling. The first word stays, which keeps the headline
   a complete sentence rather than an empty gap. */
@media (prefers-reduced-motion: reduce) {
  .rotator__word { animation: none; opacity: 0; }
  .rotator__word:first-child { opacity: 1; transform: none; }
}

/* Visually hidden but read aloud — the full marketplace list. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- PAGE WIDTH ----------
   The marketing pages were laid out on a 1240px container, which on a 1440+
   screen leaves a wide empty margin either side and makes the content look
   stranded. Widened here rather than in styles.css because this file is only
   loaded by the marketing layout — the dashboard keeps its own widths.

   The hero panel was separately set to 1320px, so its edges never lined up
   with the logo, the nav or any section below it. It now takes the same
   variable as everything else, which is what makes the column read straight
   down the page. */
/* Fluid rather than a fixed step: the page fills the window down to a 28px
   edge, and only stops widening past ~1560px, where lines would start to get
   too long to read comfortably. The gutter comes down with it. */
:root {
  --container: min(1560px, calc(100vw - 56px));
  --gutter: 20px;
}

/* Tablet: the edge tightens, because 56px off a 768px screen is a tenth of
   it. */
@media (max-width: 1024px) {
  :root { --container: calc(100vw - 32px); --gutter: 16px; }
}

/* Phone: the container stops insetting at all and the gutter alone holds the
   edge, so the content keeps ~92% of the screen instead of 76%. */
@media (max-width: 640px) {
  :root { --container: 100%; --gutter: 16px; }
}

/* ---------- HERO PANEL ----------
   The hero now sits on one tinted rounded card instead of bleeding to the
   window edges. Colours are the brand ramp already in styles.css; nothing
   new is introduced. The old .hero__bg / .hero__grid rules still apply —
   they are simply positioned against the panel now, so the glow and the grid
   are clipped by its corners instead of running under the next section. */
.hero { padding: 18px 0 22px; }

.hero__shell { max-width: var(--container); }

.hero__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 32px;
  /* padding lives in the HERO SCALE block at the foot of this file */
  background:
    radial-gradient(120% 90% at 88% 8%, rgba(214, 182, 251, .55), transparent 60%),
    linear-gradient(170deg, var(--brand-50) 0%, #FBF9FF 55%, #FFFFFF 100%);
  border: 1px solid var(--brand-100);
}
/* The glow and grid were fixed to the viewport-wide section; inside the panel
   they want to fill it instead. */
.hero__panel .hero__bg,
.hero__panel .hero__grid { z-index: 0; }
.hero__panel .hero__inner { position: relative; z-index: 2; }


@media (max-width: 1040px) {
  .hero__panel { border-radius: 26px; }
}
@media (max-width: 640px) {
  .hero { padding: 12px 0 48px; }
  .hero__panel { border-radius: 22px; }
}

/* ---------- HERO SCALE ----------
   The global h1 is clamp(48px, 6.4vw, 92px), set for a full-bleed hero. On a
   panel that reads oversized — the headline crowds the mock and pushes the
   tiles below the fold. Everything here is scoped to .hero__panel, so only
   the hero shrinks and every other h1 on the site is untouched. */
.hero__panel { padding: 34px 36px 28px; }

.hero__panel h1 {
  font-size: clamp(34px, 4.3vw, 58px);
  line-height: 1.04;
  margin-top: 18px;
}
.hero__panel .hero__sub {
  margin-top: 18px;
  font-size: clamp(15.5px, 1.15vw, 17px);
  max-width: 520px;
}
.hero__panel .hero__cta { margin-top: 26px; }
.hero__panel .hero__proof { margin-top: 26px; }
.hero__panel .hero__inner { gap: 48px; }

/* The mock carried the old hero's proportions too.
   The full transform has to be restated, not just the scale: `transform` is
   one property, so declaring scale alone silently drops the perspective tilt
   that landing.css gives it and the mock renders flat. */
.hero__panel .dashmock {
  transform: perspective(1200px) rotateY(-4deg) rotateX(2deg) scale(.92);
  transform-origin: center;
}

/* The mini cards hang 42px left and 38px right of the mock on purpose. The
   panel clips its overflow, so the column needs room for the right-hand one
   or it gets sliced down the middle at the panel edge. */
.hero__panel .hero__visual { padding-right: 44px; }

/* Left column stops at the proof line while the mock keeps going, which left
   a band of nothing under the copy. Pinning both to the top and letting the
   panel close up underneath removes it. */
.hero__panel .hero__inner { align-items: center; }



@media (max-width: 1040px) {
  .hero__panel { padding: 34px 24px 30px; }
  /* No transform override here: landing.css already flattens the mock at
     920px, and restating `transform` would cancel the tilt early. */
  .hero__panel .hero__visual { padding-right: 0; }
}
@media (max-width: 640px) {
  .hero__panel { padding: 26px 16px 26px; }
  .hero__panel h1 { font-size: clamp(30px, 8vw, 38px); }
}

/* ---------- SERVICES MEGA-MENU ----------
   A wide panel instead of the old 320px list: two grouped link columns and a
   tinted featured rail, so the menu answers "which marketplace am I on?" and
   "does this actually work?" in one view. */
.megamenu {
  /* Positioned against the sticky header, not the Services link. Anchoring
     it to the trigger put the panel wherever that link happened to land —
     and once the nav moved right, a 940px panel opening leftwards ran off
     the left edge of the window. Against the header it is centred on the
     page at every width, which is also how the reference behaves. */
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 10px;
  z-index: 100;
}
.megamenu__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  width: min(var(--container), 1080px);
  background: var(--paper);
  border: 1px solid var(--ink-100);
  border-radius: 18px;
  box-shadow: 0 24px 60px -24px rgba(20, 12, 50, .32);
  overflow: hidden;
}
.megamenu__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  padding: 26px 28px;
}
.megamenu__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.megamenu__group {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.megamenu .megamenu__item {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  padding: 10px;
  border-radius: 11px;
  text-decoration: none;
  transition: background .18s ease;
}
.megamenu .megamenu__item:hover { background: var(--brand-50); }
.megamenu__glyph {
  width: 34px; height: 34px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: var(--brand-50);
  color: var(--brand-600);
  transition: background .18s ease, color .18s ease;
}
.megamenu .megamenu__item:hover .megamenu__glyph { background: var(--brand-500); color: #fff; }
.megamenu__text { display: block; min-width: 0; }
.megamenu__label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-800);
}
.megamenu__desc {
  display: block;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-500);
  margin-top: 2px;
}

/* Featured rail */
.megamenu__featured {
  background: var(--brand-50);
  border-left: 1px solid var(--ink-100);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.megamenu__stories { display: grid; gap: 10px; }
.megamenu .megastory {
  display: block;
  background: var(--paper);
  border: 1px solid var(--brand-100);
  border-radius: 13px;
  padding: 14px 15px;
  font-size: 13.5px;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.megamenu .megastory:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -18px rgba(80, 27, 159, .5);
  background: var(--paper);
}
.megastory__metric {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--brand-700);
  background: var(--brand-50);
  border-radius: 99px;
  padding: 2px 8px;
  margin-bottom: 7px;
}
.megastory__eyebrow {
  display: block;
  font-size: 11px;
  color: var(--ink-500);
  margin-bottom: 3px;
}
.megastory__title {
  display: block;
  font-size: 13.5px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--ink-800);
}
.megamenu .megamenu__all {
  margin-top: auto;
  padding: 0;
  border-radius: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand-600);
  text-decoration: none;
}
.megamenu .megamenu__all:hover { color: var(--brand-700); background: none; }

/* Below this the menu is wider than the window; the mobile drawer takes over
   anyway, so the rail is dropped and the columns stack. */
@media (max-width: 1100px) {
  .megamenu__card { grid-template-columns: minmax(0, 1fr); width: min(calc(100vw - 32px), 560px); }
  .megamenu__featured { display: none; }
}
@media (max-width: 760px) {
  .megamenu__cols { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

/* ---------- HEADER LAYOUT ----------
   space-between spread the three children evenly, which parked the nav in the
   middle of the bar. The reference groups everything to the right: logo
   alone on the left, then the links, then the buttons hard against the edge.

   `margin-left: auto` on the nav absorbs the free space, so the links and the
   buttons travel together and the logo keeps the left on its own. */
.site-header__inner { justify-content: flex-start; gap: 24px; }

/* The free space belongs to the logo, not to the nav.
   Putting `margin-left: auto` on the nav worked on a desktop and broke
   everywhere else: below 1080px the nav is display:none, so the margin
   holding everything apart vanished with it and the Book Demo button and
   the burger collapsed back against the logo. Pushing from the logo instead
   is independent of which of the other three children are visible — nav,
   buttons, toggle — so every width packs right correctly. */
.site-header__inner .brand { margin-right: auto; }

/* Seven links plus a dropdown is more than the reference carries, so the
   links tighten a little to keep the row off the buttons at narrower desktop
   widths. */
.site-header__inner .nav-main a { padding: 8px 11px; font-size: 14px; }
.site-header__inner .nav-services__trigger { padding: 8px 11px; font-size: 14px; }

/* Below 540 both header buttons are hidden and .header-cta is left as an
   empty flex box, still contributing the parent's gap between the logo and
   the burger. */
@media (max-width: 540px) {
  .site-header__inner .header-cta:empty { display: none; }
}

@media (max-width: 1180px) {
  .site-header__inner { gap: 16px; }
  .site-header__inner .nav-main { gap: 0; }
  .site-header__inner .nav-main a,
  .site-header__inner .nav-services__trigger { padding: 8px 9px; font-size: 13.5px; }
}

/* ---------- LOGO BAR ----------
   The bar belongs to the first screen: it is the proof that follows the
   promise, and it was landing just under the fold on a laptop. Tightened so
   the hero and the marketplaces it runs on are seen together. */
.logobar { padding: 26px 0 22px; }
.logobar__label { margin-bottom: 18px; }
/* The strip scrolls rather than sitting still: five names centred on a wide
   page look sparse, where a moving row reads as a roster that continues past
   the edge. Two copies travel together and the track resets after exactly one
   copy's width, so the loop has no visible seam.

   Full-bleed on purpose — the row should run off both edges, not stop at the
   container, which is what sells the idea that there are more. */
.logobar__viewport {
  overflow: hidden;
  /* Softens both ends so names enter and leave rather than being chopped. */
  mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
}
.logobar__track {
  display: flex;
  width: max-content;
  /* 8 copies, sliding half the track (~3520px). 70s puts it near
     50px/s — readable at a glance rather than streaming past. */
  animation: logobar-drift 70s linear infinite;
}
.logobar__viewport:hover .logobar__track { animation-play-state: paused; }

@keyframes logobar-drift {
  from { transform: translateX(0); }
  /* Half the track — two of the four copies — which lands exactly where the
     other two started, so there is no seam. */
  to   { transform: translateX(-50%); }
}

.logobar__row {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0 28px 0 0;
  gap: 56px;
}

.logobar__item {
  flex: 0 0 auto;
  /* Was grey words at 85% opacity under a grayscale filter — the styling of a
     real logo strip, but with no logos to desaturate it only read as faded. */
  filter: none;
  opacity: 1;
  white-space: nowrap;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-400);
  transition: color .2s ease;
}
.logobar__viewport:hover .logobar__item { color: var(--ink-700); }

.logobar__label { color: var(--ink-400); text-align: center; }

/* No rule under the strip — it was cutting the hero away from the page. */
.logobar { border-bottom: 0; }

/* No drift: the row centres and holds still. */
@media (prefers-reduced-motion: reduce) {
  .logobar__track { animation: none; width: 100%; justify-content: center; }
  .logobar__row[aria-hidden="true"] { display: none; }
  .logobar__row { flex-wrap: wrap; justify-content: center; gap: 18px 40px; padding-right: 0; }
}

@media (max-width: 560px) {
  .logobar__row { gap: 36px; }
  .logobar__item { font-size: 16px; }
}

/* ===========================================================================
   TABLET AND PHONE PASS

   The site had breakpoints at 1080 (nav to drawer), 920 (hero stacks) and a
   cluster around 560–720, but nothing between 720 and 920 — which is exactly
   where a tablet in portrait sits. These fill that band and tidy the phone
   end of the new sections.
   =========================================================================== */

/* ---- Tablet landscape and small laptops (1025–1180) ---- */
@media (max-width: 1180px) {
  .hero__panel h1 { font-size: clamp(32px, 4.6vw, 48px); }
  .hero__panel .hero__sub { max-width: 460px; }
}

/* ---- Tablet portrait (721–1024) ---- */
@media (max-width: 1024px) {
  .hero__panel { border-radius: 24px; }
  /* Two columns of hero at this width leaves the copy around 300px, which
     breaks the headline over five lines. One column reads properly and the
     mock gets the full width underneath. */
  .hero__panel .hero__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hero__panel .hero__sub { max-width: 620px; }
  .hero__panel .dashmock { transform: none; }

  /* Three 9:16 cards across a tablet are thin slivers. */
  .ugc__wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

  .comply__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .loop__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Large phone to small tablet (561–720) ---- */
@media (max-width: 720px) {
  .loop__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .loop__stage { padding: 20px 18px; }
  .loop__art { width: 54px; height: 54px; border-radius: 14px; }
  .comply__cols { grid-template-columns: minmax(0, 1fr); }
  .comply__col { padding: 20px 18px; }
  .ugc__formats { gap: 8px; }
}

/* ---- Phone (≤560) ---- */
@media (max-width: 560px) {
  .hero__panel { border-radius: 20px; }
  .hero__panel .hero__sub { font-size: 15.5px; }
  /* Stacked, full-width CTAs: side by side they wrap mid-label. */
  .hero__panel .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__panel .hero__cta .btn { justify-content: center; width: 100%; }

  .section { padding: 44px 0; }
  .section-head { margin-bottom: 28px; }

  .ugc__wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ugc__clip:nth-child(n + 5) { display: none; } /* four is a wall; six is a scroll */

  .comply__note { padding: 14px 16px; font-size: 14.5px; }
  .loop__foot { font-size: 14px; }
}

/* ---- Small phone (≤380) ---- */
@media (max-width: 380px) {
  .hero__panel { padding: 22px 14px 22px; }
  .hero__panel h1 { font-size: 28px; }
  .ugc__wall { grid-template-columns: minmax(0, 1fr); }
  .ugc__clip:nth-child(n + 3) { display: none; }
}

/* ===========================================================================
   SECTION RHYTHM

   The page was built on a generous scale: h2 up to 64px, 72px of padding
   either side of every section and 56px under each heading. Stacked down a
   long page that reads as emptiness between ideas rather than breathing
   room — the same thing the hero had before it was scaled down.

   Tightened here, not in styles.css, so only the marketing pages move.
   =========================================================================== */
.section { padding: 56px 0; }
.section-tight { padding: 40px 0; }

.section-head { margin-bottom: 34px; max-width: 680px; }
.section-head h2 { margin-top: 12px; }
.section-head p { margin-top: 14px; font-size: 16.5px; max-width: 560px; }

/* 64px headings belong on a hero, not on every section. */
.section h2,
.section-head h2 { font-size: clamp(27px, 3.1vw, 42px); line-height: 1.08; }
.section h3 { font-size: clamp(18px, 1.5vw, 21px); }

@media (max-width: 1024px) {
  .section { padding: 48px 0; }
  .section-head { margin-bottom: 28px; }
}
@media (max-width: 560px) {
  .section-head h2 { font-size: clamp(24px, 7vw, 30px); }
  .section-head p { font-size: 15.5px; }
}

/* ---------- HOW IT WORKS: TWO TRACKS ----------
   The brand flow and the creator flow are the same campaign seen from two
   sides, so they sit in two columns you can read across rather than eight
   cards stacked down the page. */
.tracks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* No gap: the rule between the columns provides the separation, and a gap
     on top of it would leave the line floating in a channel. */
  gap: 0;
}

/* No card around either track — the two lists sit on the page and a single
   rule divides them. */
.track { padding-right: 44px; }
.track + .track {
  border-left: 1px solid var(--ink-100);
  padding-right: 0;
  padding-left: 44px;
}

/* Stacked rather than a chip and a line sharing a row: the summary is a
   sentence now, and it would have squeezed into whatever was left beside
   the chip. */
.track__head {
  padding-bottom: 22px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--ink-100);
}
.track__chip {
  display: inline-block;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand-700);
  background: var(--brand-50);
  border-radius: 99px;
  padding: 5px 11px;
  white-space: nowrap;
}
.track__head h3 {
  font-size: 21px;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.015em;
  color: var(--ink-800);
}
.track__head p {
  margin: 8px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-500);
  max-width: 44ch;
}

/* The spine. Counter lives here so each column numbers from 01. */
.track__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: track-step;
  position: relative;
}

.track__step {
  counter-increment: track-step;
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 18px;
  padding: 0 0 32px;
}
.track__step:last-child { padding-bottom: 0; }

/* Line between one marker and the next. Drawn per step rather than as one
   run down the list, so it stops at the last marker instead of trailing off
   the bottom of the card. */
.track__step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 58px;
  bottom: 16px;
  width: 2px;
  background: linear-gradient(var(--brand-100), var(--brand-50));
}

.track__marker {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, var(--brand-50), var(--brand-100));
  color: var(--brand-700);
  border: 1px solid var(--paper);
}

/* The step number, from the counter — no markup, always in sequence. */
.track__body { min-width: 0; }
.track__body h4 {
  margin: 0;
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-900, var(--ink-800));
}
.track__body h4::before {
  content: counter(track-step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--brand-600);
  display: block;
  margin-bottom: 8px;
}
.track__body p {
  margin: 8px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-500);
}

/* Stacked, the divider has to turn with the layout: a left border between
   columns that are no longer side by side would sit against nothing. */
@media (max-width: 920px) {
  .tracks { grid-template-columns: minmax(0, 1fr); }
  .track { padding-right: 0; }
  .track + .track {
    border-left: 0;
    border-top: 1px solid var(--ink-100);
    padding-left: 0;
    padding-top: 26px;
    margin-top: 26px;
  }
}
@media (max-width: 560px) {
  .track__step { grid-template-columns: 38px minmax(0, 1fr); gap: 14px; padding-bottom: 26px; }
  .track__marker { width: 38px; height: 38px; border-radius: 11px; }
  .track__step:not(:last-child)::before { left: 18px; top: 50px; bottom: 14px; }
}

/* ---------- TESTIMONIAL MARQUEES ----------
   Two rows drifting opposite ways. The second only differs by direction, so
   it reuses the same keyframe reversed rather than carrying its own. */
.tmarquee {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.tmarquee + .tmarquee { margin-top: 16px; }

.tmarquee__track {
  display: flex;
  width: max-content;
  animation: tmarquee-drift 80s linear infinite;
}
.tmarquee--right .tmarquee__track { animation-direction: reverse; }
.tmarquee:hover .tmarquee__track { animation-play-state: paused; }

@keyframes tmarquee-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.tmarquee__row {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0 8px 0 0;
  gap: 16px;
}

.tq {
  flex: 0 0 auto;
  width: 360px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--paper);
  border: 1px solid var(--ink-100);
  border-radius: 16px;
  padding: 20px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.tq:hover {
  border-color: var(--brand-200);
  box-shadow: 0 16px 34px -22px rgba(80, 27, 159, .45);
}

.tq__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tq__platform {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand-700);
  background: var(--brand-50);
  border-radius: 99px;
  padding: 4px 10px;
}
.tq__stars { color: #F5A524; font-size: 13px; letter-spacing: 1px; }

.tq__quote {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-700);
  /* Quotes vary in length; clamping keeps every card the same height so the
     row does not jitter as it moves. */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tq__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--ink-100);
}
.tq__av { width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto; }
.tq__who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tq__name { font-size: 13.5px; font-weight: 600; color: var(--ink-800); }
.tq__role {
  font-size: 11.5px;
  color: var(--ink-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tq__metric {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--brand-700);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .tmarquee__track { animation: none; }
}
@media (max-width: 560px) {
  .tq { width: 290px; padding: 16px; }
  .tq__quote { font-size: 14px; -webkit-line-clamp: 6; line-clamp: 6; }
}

/* ---------- FEEDBACK EXAMPLES ----------
   These are meant to look like the real thing a shopper sees on a listing,
   so the card borrows that furniture: a marketplace line at the top, a
   verified tick, stars, a bold one-line title, then the body and who wrote
   it.

   Targets .fb, not .review-grid. The cards moved into the swiper, which
   means the old grid wrapper is gone and every rule hanging off it — here
   and in marketing-extras.css — stopped matching. The base card styling
   that sheet provided is restated below. */
.fb {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-lg);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.fb:hover {
  border-color: var(--brand-200);
  box-shadow: 0 16px 34px -22px rgba(80, 27, 159, .45);
}

/* A thin marketplace strip across the top, so a glance tells you where the
   feedback came from. */
.fb header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 18px;
  background: var(--paper-soft);
  border-bottom: 1px solid var(--ink-100);
}
.fb .platform-pill {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-700);
  font-weight: 500;
}

.fb .verify-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--good, #15803D);
  white-space: nowrap;
}
.fb .verify-pill svg { width: 13px; height: 13px; flex: 0 0 auto; }
.fb .verify-pill circle { fill: currentColor; opacity: .14; }
.fb .verify-pill path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fb .stars { padding: 16px 18px 0; color: #F5A524; font-size: 14px; letter-spacing: .05em; }
.fb h4 {
  padding: 0 18px;
  margin: 8px 0 6px;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink-800);
}
.fb p {
  padding: 0 18px 16px;
  margin: 0;
  color: var(--ink-500);
  font-size: 14px;
  line-height: 1.55;
}

.fb footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 13px 18px;
  border-top: 1px solid var(--ink-100);
  background: var(--paper-soft);
}
.fb footer .av { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; }
.fb footer .by { font-size: 12.5px; color: var(--ink-700); }
.fb footer .helpful { font-size: 11.5px; color: var(--ink-400); margin-top: 1px; }

/* ---------- AUTO SWIPER ----------
   Native scroll with snap points, so a swipe, a trackpad, the arrow keys and
   the scrollbar all work without a library reimplementing them. */
.aswipe { position: relative; }

.aswipe__track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Room for the card shadow, and for the focus ring not to be clipped. */
  padding: 4px 4px 14px;
  margin: -4px -4px 0;
  scrollbar-width: none;
}
.aswipe__track::-webkit-scrollbar { display: none; }
.aswipe__track:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 4px; border-radius: 18px; }

/* Direct children are the slides, whatever they are. Two up on desktop. */
.aswipe__track > * {
  flex: 0 0 calc((100% - 16px) / 2);
  scroll-snap-align: start;
}

.aswipe__controls {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}
.aswipe__controls button {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--ink-100);
  background: var(--paper);
  color: var(--ink-700);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.aswipe__controls button:hover {
  border-color: var(--brand-200);
  color: var(--brand-700);
  background: var(--brand-50);
}
.aswipe__controls svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

@media (max-width: 760px) {
  /* One card at a time, with the next one peeking so the track reads as
     scrollable without needing the arrows. */
  .aswipe__track > * { flex: 0 0 86%; }
  .aswipe__controls { display: none; }
}

/* ---------- PROOF CLAIMS ----------
   Four short claims in one row. No card around each: boxes made them read as
   four separate exhibits, where a hairline between them reads as one
   statement with four parts. */
.proof-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 34px 0 0;
}
.proof-stat { padding: 0 26px; }
.proof-stat:first-child { padding-left: 0; }
.proof-stat:last-child { padding-right: 0; }
.proof-stat + .proof-stat { border-left: 1px solid var(--ink-100); }

.proof-stat dt {
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--ink-900, var(--ink-800));
}
.proof-stat dd { margin: 10px 0 0; display: flex; flex-direction: column; gap: 4px; }
.proof-stat__label { font-size: 13.5px; font-weight: 600; color: var(--ink-700); }
.proof-stat__desc { font-size: 12.5px; line-height: 1.5; color: var(--ink-500); }

/* Two up, and the rule has to move with them: a left border on the third
   item would sit at the start of a row. */
@media (max-width: 860px) {
  .proof-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
  .proof-stat { padding: 0 20px; }
  .proof-stat:nth-child(odd) { padding-left: 0; }
  .proof-stat:nth-child(even) { padding-right: 0; }
  .proof-stat:nth-child(odd) { border-left: 0; }
}
@media (max-width: 480px) {
  .proof-stats { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .proof-stat { padding: 0; border-left: 0; }
  .proof-stat + .proof-stat { border-left: 0; border-top: 1px solid var(--ink-100); padding-top: 20px; }
}

/* ---------- PLATFORM FEATURES ----------
   No cards: eight bordered boxes read as eight separate things, where the
   capabilities are one set. One ruled grid instead, with hairlines doing the
   separating — the same treatment as the claims row. */
.fgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

.fitem {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 24px;
  border-bottom: 1px solid var(--ink-100);
  border-left: 1px solid var(--ink-100);
  transition: background .2s ease;
}
.fitem:hover { background: var(--paper); }

/* A rule at the start of a row would hang off the left edge of the grid. */
.fitem:nth-child(4n + 1) { border-left: 0; padding-left: 0; }
.fitem:nth-child(4n) { padding-right: 0; }

/* Rules between rows only — nothing along the top or bottom edge of the
   grid. The last row is the final four items, which holds because the
   number of capabilities (8) divides by the column count. */
.fitem:nth-last-child(-n + 4) { border-bottom: 0; }

/* The first capability is the one Credorra leads on, so it is filled rather
   than ruled. It keeps the grid's footprint — spanning would leave seven
   cells across four columns and an orphan on the second row — and takes
   back the padding the first-in-row rule removes, since text sitting flush
   against a dark edge reads as a mistake. */
.fitem:first-child {
  background: var(--ink-950);
  /* Square. The grid is built from straight hairlines, so any rounding on
     the one filled cell reads as a card that wandered in. */
  border-radius: 0;
  border-bottom-color: transparent;
  padding: 26px 24px;
}
.fitem:first-child:hover { background: var(--ink-950); }
.fitem:first-child h3 { color: var(--paper); }
.fitem:first-child p { color: var(--ink-300); }
.fitem:first-child .fitem__tag { color: var(--brand-300); }

.fitem__tag {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand-700);
}
.fitem h3 { margin: 0; font-size: 16.5px; font-weight: 600; line-height: 1.3; }
.fitem p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-500); }

/* Where you sell, closing the section — a rule above it rather than a box
   around it, matching the grid. */
.fplatforms {
  margin-top: 30px;
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.fplatforms h3 { margin: 0; font-size: 17px; font-weight: 600; }
.fplatforms p { margin: 5px 0 0; font-size: 13.5px; color: var(--ink-500); }
.fplatforms__pills { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 1024px) {
  .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fitem:nth-child(4n + 1), .fitem:nth-child(4n) { padding-left: 24px; padding-right: 24px; border-left: 1px solid var(--ink-100); }
  .fitem:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
  .fitem:nth-child(2n) { padding-right: 0; }
  .fitem:first-child { padding-left: 24px; }
  /* Two up: the last row is the final two. */
  .fitem:nth-last-child(-n + 4) { border-bottom: 1px solid var(--ink-100); }
  .fitem:nth-last-child(-n + 2) { border-bottom: 0; }
}
@media (max-width: 620px) {
  .fgrid { grid-template-columns: minmax(0, 1fr); }
  .fitem, .fitem:nth-child(n) { border-left: 0; padding: 22px 0; }
  .fitem:first-child { padding: 22px 20px; }
  /* One up: only the final item has no rule under it. */
  .fitem:nth-last-child(-n + 4) { border-bottom: 1px solid var(--ink-100); }
  .fitem:last-child { border-bottom: 0; }
}

/* ---------- FIGURE GRID ----------
   A 2x2 block of figures with hairlines instead of cards — the same
   language as the single-row claims, for places where four numbers sit
   beside a column of text rather than across the page.

   Named .figure, not .kpi: subpages.css already owns .kpi and gives it a
   background, a radius and a border shorthand. Loading later only wins the
   properties you actually declare, so that card styling came through
   underneath and the hairlines looked like boxes. */
.figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0;
}
.figure {
  /* Uniform padding on every cell. Zeroing it on the last row — which this
     did — left the vertical rule between the bottom pair ending short of
     the one above it, so the divider read as broken. */
  padding: 24px 26px;
  border-left: 1px solid var(--ink-100);
  border-bottom: 1px solid var(--ink-100);
}
/* Rules between only: nothing down the outer left edge or under the last
   row. Four figures in two columns, so that is every odd item and the
   final two. */
.figure:nth-child(odd) { border-left: 0; padding-left: 0; }
.figure:nth-child(even) { padding-right: 0; }
.figure:nth-last-child(-n + 2) { border-bottom: 0; }

.figure dt {
  font-size: clamp(26px, 2.4vw, 32px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--ink-900, var(--ink-800));
}
.figure dd {
  margin: 9px 0 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-500);
}

@media (max-width: 480px) {
  .figures { grid-template-columns: minmax(0, 1fr); }
  .figure { border-left: 0; padding: 20px 0; }
  .figure:nth-child(n) { border-bottom: 1px solid var(--ink-100); }
  .figure:last-child { border-bottom: 0; }
}

/* ---------- INNER PAGE HERO ----------
   The same tinted panel the homepage opens with, so About, Services, FAQ,
   Contact, Blog, Case Studies and the calculator all begin the same way
   instead of a full-bleed gradient band with a hard rule under it. */
.page-hero {
  padding: 18px 0 28px;
  background: none;
  border-bottom: 0;
}
.page-hero__shell { max-width: var(--container); }

.page-hero__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 32px;
  padding: 56px 40px;
  background:
    radial-gradient(120% 90% at 88% 8%, rgba(214, 182, 251, .5), transparent 60%),
    linear-gradient(170deg, var(--brand-50) 0%, #FBF9FF 55%, #FFFFFF 100%);
  border: 1px solid var(--brand-100);
}
.page-hero__bg,
.page-hero__grid { position: absolute; inset: 0; z-index: 0; }
.page-hero__grid {
  background-image:
    linear-gradient(to right, rgba(10, 15, 34, .04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10, 15, 34, .04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(70% 70% at 50% 30%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 30%, #000 30%, transparent 75%);
}
.page-hero__inner { position: relative; z-index: 2; max-width: 820px; }

/* Matching the homepage, where the global h1 was too large for a panel. */
.page-hero h1 { font-size: clamp(32px, 4.3vw, 54px); line-height: 1.05; margin-top: 14px; }
.page-hero p { margin-top: 18px; font-size: clamp(15.5px, 1.15vw, 17px); max-width: 600px; }

@media (max-width: 1024px) {
  .page-hero__panel { padding: 44px 28px; border-radius: 26px; }
}
@media (max-width: 640px) {
  .page-hero { padding: 12px 0 22px; }
  .page-hero__panel { padding: 34px 18px; border-radius: 20px; }
  .page-hero h1 { font-size: clamp(28px, 8vw, 36px); }
}

/* ---------- SERVICE PHOTOS ----------
   A photo at the head of each service row. Fixed aspect with object-fit so
   a landscape source fills the slot without the row jumping as it loads. */
.service-shot {
  position: relative;
  aspect-ratio: 16 / 9;
  margin-bottom: 20px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--ink-100);
}
.service-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Photo above the mission figures. */
.about-shot {
  position: relative;
  aspect-ratio: 3 / 2;
  margin-bottom: 26px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--ink-100);
}
.about-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Photographic avatars, everywhere one appears.
   The radius is restated on the container AND the image rather than relied
   on from landing.css: the container clips with overflow, but a browser
   still paints the image's own corners square inside it at some zoom levels,
   so both carry it. aspect-ratio keeps them perfectly round if the box is
   ever sized unevenly. */
.avatar-stack .av,
.review-card-mini .av,
.tq__av,
.fb footer .av {
  overflow: hidden;
  padding: 0;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
}
.avatar-stack .av img,
.review-card-mini .av img,
.tq__av img,
.fb footer .av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 50%;
}