@import url("/site/card.css");

.eat-acquisition {
  /* Retargeted to the Wallet & Card reference (/card): the acquisition surfaces
     used to sit on a warm brown ground with cream ink, which read as a separate
     product next to the reference's neutral near-black. The ember accents are
     unchanged — --acq-ember is already the warm stop of the reference CTA
     gradient, so the brand warmth now comes from the accents rather than from
     tinting every surface and every line of text. */
  --acq-char: #050505;
  --acq-surface: #0f0f0f;
  --acq-surface-2: #141414;
  --acq-cream: #f0f0f0;
  --acq-smoke: rgba(255, 255, 255, 0.65);
  --acq-ember: #ff8012;
  --acq-hot: #ff6a2a;
  background: var(--acq-char);
  color: var(--acq-cream);
}

.eat-acquisition main {
  overflow: hidden;
}

/* Cards are display surfaces, not controls, so their body copy shows the arrow
   rather than an I-beam inviting a text selection nobody wants.

   Links and buttons inside a card keep their pointer without an exception here:
   the UA stylesheet declares `cursor: pointer` on :any-link, and an explicit
   declaration on the element always beats a value inherited from an ancestor. */
.eat-acquisition .acq-card,
.eat-acquisition .acq-truth-grid > div,
.eat-acquisition .acq-stack article,
.eat-acquisition .acq-format,
.eat-acquisition .acq-growth-path li,
.eat-acquisition .acq-faq-grid article,
.eat-acquisition .acq-example,
.eat-acquisition .acq-phone {
  cursor: default;
}

.eat-acquisition .acq-wrap {
  width: min(1140px, calc(100% - 40px));
  margin: 0 auto;
}

/* Matched to .el-section-label on the reference. An earlier pass aligned this
   to the reference's *hero* label (13px/800/0.28em), which is a different and
   much wider treatment than the label it uses above each section — that gap in
   tracking is what made the two tabs read differently.

   Colour stays --acq-ember rather than the reference's --orange: this tab's
   badges, CTA gradient and accents are all #ff8012, so matching the reference's
   #ff6b00 here alone would put a second orange on the page. */
.eat-acquisition .acq-eyebrow:not(.el-hero__kicker) {
  color: var(--acq-ember);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* The hero label wears the reference's own .el-hero__kicker (13px/800/0.28em),
   which reaches this sheet through the card.css import above. The section rule
   excludes it rather than competing on specificity, so the reference class is
   genuinely what styles it and the values are not duplicated here.

   Only the colour is pinned: .el-hero__kicker resolves var(--accent), which is
   not defined in this scope, and this tab's accent is --acq-ember anyway. */
.eat-acquisition .acq-eyebrow.el-hero__kicker {
  color: var(--acq-ember);
}

.eat-acquisition h1,
.eat-acquisition h2 {
  color: var(--acq-cream);
  font-family: var(--font-display);
  font-weight: var(--eat-display-weight, 800);
  letter-spacing: var(--eat-display-tracking, -0.01em);
  line-height: var(--eat-display-leading, 0.96);
  text-wrap: balance;
}

.eat-acquisition h1 {
  max-width: 900px;
  margin-top: 18px;
  font-size: clamp(42px, 5.4vw, 76px);
}

.eat-acquisition .acq-hero h1 {
  text-transform: uppercase;
}

.eat-acquisition .acq-hero__accent {
  color: var(--acq-ember);
}

.eat-acquisition h2 {
  max-width: 850px;
  /* The reference tracks its section headings tighter than its hero:
     -0.02em at 44px against -0.01em at 76px. */
  letter-spacing: -0.02em;
  margin-top: 14px;
  font-size: clamp(30px, 3.2vw, 44px);
}

.eat-acquisition h3 {
  color: var(--acq-cream);
  font-size: 20px;
  line-height: 1.2;
}

.eat-acquisition .acq-lede {
  max-width: 680px;
  margin-top: 26px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 18px;
  line-height: 1.6;
}

.eat-acquisition .acq-body {
  margin-top: 20px;
  color: var(--acq-smoke);
  font-size: 18px;
  line-height: 1.65;
}

.eat-acquisition .acq-body--wide {
  max-width: 840px;
}

.eat-acquisition .acq-hero {
  position: relative;
  padding: clamp(72px, 10vw, 128px) 0 clamp(70px, 9vw, 112px);
  background:
    radial-gradient(70% 90% at 84% 10%, rgba(255, 106, 42, 0.1), transparent 60%),
    radial-gradient(70% 80% at 8% 100%, rgba(255, 128, 18, 0.07), transparent 65%),
    var(--acq-char);
}

.eat-acquisition .acq-hero--business {
  background:
    radial-gradient(65% 100% at 78% 10%, rgba(255, 128, 18, 0.12), transparent 62%),
    var(--acq-char);
}

.eat-acquisition .acq-hero--network {
  background:
    radial-gradient(58% 82% at 92% 6%, rgba(255, 128, 18, 0.2), transparent 62%),
    radial-gradient(54% 70% at 4% 100%, rgba(255, 90, 31, 0.14), transparent 65%),
    linear-gradient(145deg, #0c0a09, #160e08);
}

/* The home headline is 66 characters against the Create & Earn hero's 49, so
   at the shared 76px it needed a sixth line where the reference takes five,
   and the hero ran 130px taller. Widening the copy column closes that without
   giving this one hero its own type scale. The panel still clears its 340px
   floor and its own min(470px, 100%) cap. */
@media (min-width: 981px) {
  .eat-acquisition .acq-hero--network .acq-hero__grid {
    grid-template-columns: minmax(0, 1.28fr) minmax(340px, 0.72fr);
  }
}

/* .acq-hero__copy is the home hero only. It carried its own display scale
   (48-84px against the shared 42-76px), which made the one hero on the site
   that is not on the shared scale — 84px here against 76px on Create & Earn.
   Only the measure is kept; size and leading come from .eat-acquisition h1. */
.eat-acquisition .acq-hero__copy h1 {
  max-width: 760px;
  /* Same floor as the shared scale, lower ceiling. This headline is 66
     characters against the Create & Earn hero's 49, so at the shared 76px cap
     it ran six lines where the reference takes five and the hero stood 130px
     taller. Trimming the ceiling lands it on the reference's line count and
     height instead of leaving one hero visibly heavier than the rest. */
  font-size: clamp(42px, 4.6vw, 64px);
}

/* The three spans were display:block, forcing a break after each. This
   headline is ~37% longer than the Create & Earn hero's, so every forced line
   wrapped again — three intended lines rendered as seven, and the hero grew to
   1103px against a 720px viewport. Letting it flow puts the ember span inline
   the way the reference does, and balance keeps the rag even. */
.eat-acquisition .acq-hero__copy h1 {
  text-wrap: balance;
}

.eat-acquisition .acq-hero__accent {
  color: var(--acq-ember);
}

.eat-acquisition .acq-network-loop {
  width: min(470px, 100%);
  justify-self: end;
  padding: clamp(24px, 3.3vw, 38px);
  border: 1px solid rgba(243, 231, 211, 0.14);
  border-radius: 30px;
  background:
    radial-gradient(100% 65% at 100% 0%, rgba(255, 128, 18, 0.14), transparent 70%),
    linear-gradient(155deg, rgba(33, 23, 16, 0.96), rgba(12, 10, 9, 0.98));
  box-shadow: 0 44px 100px -48px #000, inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.eat-acquisition .acq-network-loop__head {
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(243, 231, 211, 0.11);
}

.eat-acquisition .acq-network-loop__head strong {
  display: block;
  margin-top: 8px;
  color: var(--acq-cream);
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -0.03em;
}

.eat-acquisition .acq-network-loop ol {
  margin: 0;
  padding: 8px 0 0;
  list-style: none;
}

.eat-acquisition .acq-network-loop li {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  padding: 17px 0;
}

.eat-acquisition .acq-network-loop li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 48px;
  height: 1px;
  background: rgba(243, 231, 211, 0.08);
}

.eat-acquisition .acq-network-loop li > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255, 128, 18, 0.38);
  border-radius: 50%;
  color: var(--acq-ember);
  font-family: ui-monospace, monospace;
  font-size: 10px;
  font-weight: 900;
}

.eat-acquisition .acq-network-loop b {
  display: block;
  color: var(--acq-cream);
  font-size: 16px;
  line-height: 1.25;
}

.eat-acquisition .acq-network-loop li p {
  margin-top: 5px;
  color: var(--acq-smoke);
  font-size: 13px;
  line-height: 1.5;
}

.eat-acquisition .acq-network-loop__note {
  margin-top: 4px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255, 128, 18, 0.08);
  color: #d8c7b1;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.eat-acquisition .acq-hero__principles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.eat-acquisition .acq-hero__principles span {
  padding: 7px 11px;
  border: 1px solid rgba(243, 231, 211, 0.13);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
  color: #c7b6a0;
  font-size: 12px;
  font-weight: 700;
}

.eat-acquisition .acq-actions--center { justify-content: center; }

.eat-acquisition .acq-format-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 46px;
}

.eat-acquisition .acq-format {
  min-height: 220px;
  padding: 22px 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
}

.eat-acquisition .acq-format span {
  color: var(--acq-ember);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.eat-acquisition .acq-format h3 { margin-top: 38px; font-size: 25px; }
.eat-acquisition .acq-format p { margin-top: 10px; color: var(--acq-smoke); line-height: 1.55; }

.eat-acquisition .acq-subheading {
  margin: 48px 0 20px;
  color: var(--acq-cream);
  font-size: clamp(22px, 3vw, 30px);
}

.eat-acquisition .acq-example-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 34px;
}

.eat-acquisition .acq-example {
  overflow: hidden;
  border: 1px solid rgba(243, 231, 211, 0.12);
  border-radius: 18px;
  background: var(--acq-surface);
}

.eat-acquisition .acq-example > a {
  position: relative;
  display: block;
  overflow: hidden;
  background: #080604;
}

.eat-acquisition .acq-example img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 180ms ease;
}

.eat-acquisition .acq-example a:hover img { transform: scale(1.02); }

.eat-acquisition .acq-example__watch {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(12, 10, 9, 0.88);
  color: var(--acq-cream);
  font-size: 12px;
  font-weight: 800;
}

.eat-acquisition .acq-example__body { padding: 20px; }
.eat-acquisition .acq-example__body > span {
  color: var(--acq-ember);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.eat-acquisition .acq-example__body h3 { margin-top: 10px; font-size: 23px; }
.eat-acquisition .acq-example__body p { margin-top: 9px; color: var(--acq-smoke); line-height: 1.5; }
.eat-acquisition .acq-example__body small { display: block; margin-top: 14px; color: #9c8b77; line-height: 1.45; }

.eat-acquisition .acq-callout {
  margin-top: 28px;
  padding: 20px 24px;
  border-left: 3px solid var(--acq-ember);
  background: rgba(255, 128, 18, 0.07);
  color: #ddcdb7;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}

.eat-acquisition .acq-growth-path {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 44px;
  list-style: none;
  counter-reset: growth;
}

.eat-acquisition .acq-growth-path li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--acq-cream);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  counter-increment: growth;
  position: relative;
  z-index: 0;
  transition: transform 420ms var(--eat-ease, ease),
    border-color 420ms var(--eat-ease, ease),
    box-shadow 420ms var(--eat-ease, ease);
}

/* One card at a time lifts out of the grid on a soft scale with a shadow
   around it, then settles back as the next takes over. Distinct from How
   Creators Earn, which flips its active step to a solid ember fill — here the
   card keeps its surface and is separated by depth instead of colour.

   Hover applies the same treatment deliberately: the loop then reads as a
   demonstration of the affordance rather than decoration competing with it. */
.eat-acquisition .acq-growth-path li.is-spotlit,
.eat-acquisition .acq-growth-path li:hover {
  z-index: 1;
  transform: scale(1.035);
  border-color: rgba(255, 128, 18, 0.4);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42), 0 0 26px rgba(255, 128, 18, 0.16);
}

@media (prefers-reduced-motion: reduce) {
  .eat-acquisition .acq-growth-path li,
  .eat-acquisition .acq-growth-path li::before {
    transition: none;
  }

  /* Keep the shadow as the cue, drop the movement. */
  .eat-acquisition .acq-growth-path li.is-spotlit,
  .eat-acquisition .acq-growth-path li:hover {
    transform: none;
  }
}

.eat-acquisition .acq-growth-path li::before {
  content: "0" counter(growth);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: 6px;
  border-radius: 10px;
  background: rgba(255, 115, 22, 0.18);
  color: var(--acq-ember);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  transition: background var(--eat-duration, 300ms) var(--eat-ease, ease),
    color var(--eat-duration, 300ms) var(--eat-ease, ease);
}

.eat-acquisition .acq-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.88fr);
  gap: clamp(44px, 6vw, 82px);
  align-items: center;
}

.eat-acquisition .acq-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.eat-acquisition .acq-button {
  display: inline-flex;
  /* Product-wide button standard — see .el-btn in card.css. */
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  border: 1px solid rgba(243, 231, 211, 0.2);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  /* `color` is in the list because .acq-button--ghost shifts its ink to ember
     on hover; without it the text would snap while the border eased. */
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.eat-acquisition .acq-button:hover {
  transform: translateY(-2px);
}

.eat-acquisition .acq-button--primary {
  border-color: transparent;
  background: linear-gradient(105deg, var(--acq-ember), var(--acq-hot));
  color: #1a0d02;
  box-shadow: 0 14px 34px -18px rgba(255, 128, 18, 0.9);
}

.eat-acquisition .acq-button--ghost {
  background: rgba(255, 255, 255, 0.03);
  color: var(--acq-cream);
}

/* The secondary-hover standard for the whole product. The values now live in
   --eat-ghost-hover-* (styles/network.css) so the other surfaces resolve the
   same numbers instead of each carrying their own near-miss copy; this rule is
   where they were measured from and is unchanged by the move. */
.eat-acquisition .acq-button--ghost:hover {
  border-color: var(--eat-ghost-hover-border, #ff8012);
  background: var(--eat-ghost-hover-bg, rgba(255, 128, 18, 0.08));
  color: var(--eat-ghost-hover-ink, #ff8012);
}

.eat-acquisition .acq-button--dark {
  margin-top: 28px;
  border-color: #1a0d02;
  background: #1a0d02;
  color: var(--acq-ember);
}

.eat-acquisition .acq-fineprint {
  max-width: 670px;
  margin-top: 20px;
  color: #806e5d;
  font-size: 13px;
  line-height: 1.55;
}

.eat-acquisition .acq-profile-heading {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 34px;
  align-items: center;
}

.eat-acquisition .acq-profile-avatar {
  width: 160px;
  height: 160px;
  border: 2px solid rgba(255, 128, 18, 0.5);
  border-radius: 50%;
  object-fit: cover;
}

.eat-acquisition .acq-profile-avatar--empty {
  display: grid;
  place-items: center;
  background: var(--acq-surface-2);
  color: var(--acq-ember);
  font-size: 56px;
  font-weight: 900;
}

.eat-acquisition .acq-profile-hero h1 { font-size: clamp(48px, 7vw, 88px); }
.eat-acquisition .acq-profile-meta { margin-top: 18px; color: var(--acq-smoke); }
.eat-acquisition .acq-profile-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.eat-acquisition .acq-profile-tags span,
.eat-acquisition .acq-lead-attribution {
  padding: 7px 11px;
  border: 1px solid rgba(255, 128, 18, 0.35);
  border-radius: 999px;
  color: var(--acq-ember);
  font-size: 13px;
}

.eat-acquisition .acq-profile-work-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 44px;
}

.eat-acquisition .acq-profile-work { overflow: hidden; border: 1px solid rgba(243,231,211,.1); border-radius: 18px; background: var(--acq-surface); }
.eat-acquisition .acq-profile-work video,
.eat-acquisition .acq-profile-work > img,
.eat-acquisition .acq-profile-work__empty { width: 100%; aspect-ratio: 9 / 16; max-height: 520px; background: #080604; object-fit: cover; }
.eat-acquisition .acq-profile-work__empty { display: grid; place-items: center; color: var(--acq-smoke); }
.eat-acquisition .acq-profile-work > div:last-child { padding: 20px; }
.eat-acquisition .acq-profile-work p { margin-top: 8px; color: var(--acq-smoke); line-height: 1.55; }

.eat-acquisition .acq-lead-grid { display: grid; grid-template-columns: minmax(0,.85fr) minmax(360px,1.15fr); gap: clamp(40px,7vw,90px); align-items: start; text-align: left; }
.eat-acquisition .acq-lead-form,
.eat-acquisition .acq-lead-success { display: grid; gap: 16px; padding: 26px; border: 1px solid rgba(26,13,2,.18); border-radius: 18px; background: #f7ead6; color: #21160f; }
.eat-acquisition .acq-lead-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.eat-acquisition .acq-lead-form label { display: grid; gap: 7px; font-size: 13px; font-weight: 800; }
.eat-acquisition .acq-lead-form input,
.eat-acquisition .acq-lead-form select,
.eat-acquisition .acq-lead-form textarea { width: 100%; padding: 12px; border: 1px solid rgba(33,22,15,.25); border-radius: 10px; background: #fffaf1; color: #21160f; font: inherit; }
.eat-acquisition .acq-lead-check { grid-template-columns: 20px 1fr !important; align-items: start; font-weight: 500 !important; line-height: 1.45; }
.eat-acquisition .acq-lead-check input { width: 18px; margin-top: 2px; }
.eat-acquisition .acq-lead-honeypot { position: absolute; left: -9999px; }
.eat-acquisition .acq-lead-error { color: #8b1e0f; line-height: 1.45; }
.eat-acquisition .acq-form-status { min-height: 20px; color: #5f4d3b; font-size: 13px; line-height: 1.45; }
.eat-acquisition .acq-lead-form .acq-button:disabled { cursor: wait; opacity: .62; transform: none; }
.eat-acquisition .acq-lead-success h3 { color: #21160f; font-size: 28px; }
.eat-acquisition .acq-lead-success p:last-child { line-height: 1.6; }

.eat-acquisition .acq-phone {
  position: relative;
  width: min(320px, 82vw);
  justify-self: center;
  padding: 11px;
  border: 1px solid rgba(243, 231, 211, 0.18);
  border-radius: 44px;
  background: linear-gradient(155deg, #2a1c13, #0e0a07);
  box-shadow: 0 40px 80px -30px #000, 0 0 60px -25px rgba(255, 128, 18, 0.7);
  transform: rotate(2deg);
}

/* Hardware buttons on the frame: volume pair on the left, power on the right.
   The rocker's second button is an offset box-shadow rather than a third
   pseudo-element, since ::before/::after are the only two available here. */
.eat-acquisition .acq-phone::before,
.eat-acquisition .acq-phone::after {
  content: "";
  position: absolute;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(243, 231, 211, 0.3), rgba(243, 231, 211, 0.08));
}

.eat-acquisition .acq-phone::before {
  top: 104px;
  left: -3px;
  height: 34px;
  box-shadow: 0 46px 0 rgba(243, 231, 211, 0.2);
}

.eat-acquisition .acq-phone::after {
  top: 140px;
  right: -3px;
  height: 58px;
}

.eat-acquisition .acq-phone__screen {
  position: relative;
  min-height: 510px;
  /* Top padding clears the Dynamic Island drawn below; the frame's 11px bezel
     means the screen radius is the outer radius minus the bezel. */
  padding: 62px 24px 34px;
  border-radius: 33px;
  background:
    radial-gradient(120% 80% at 50% 110%, rgba(255, 90, 31, 0.62), transparent 60%),
    #130d09;
}

/* Dynamic Island, with the front camera seated in its right end. */
.eat-acquisition .acq-phone__screen::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 50%;
  width: 92px;
  height: 27px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #000;
}

.eat-acquisition .acq-phone__screen::after {
  content: "";
  position: absolute;
  top: 24px;
  left: calc(50% + 26px);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #46586f, #05070c 60%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.eat-acquisition .acq-phone__screen > strong {
  display: block;
  margin-top: 42px;
  color: var(--acq-cream);
  font-size: 32px;
  line-height: 1;
}

.eat-acquisition .acq-phone__screen > p {
  margin-top: 14px;
  color: var(--acq-smoke);
  font-size: 14px;
  line-height: 1.5;
}

.eat-acquisition .acq-phone__tag {
  display: inline-flex;
  padding: 6px 10px;
  border: 1px solid rgba(255, 128, 18, 0.35);
  border-radius: 999px;
  background: rgba(255, 128, 18, 0.1);
  color: var(--acq-ember);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.eat-acquisition .acq-phone__step {
  display: flex;
  min-height: 56px;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(243, 231, 211, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  color: #ddcdb7;
  font-size: 14px;
  font-weight: 700;
}

.eat-acquisition .acq-phone__step:first-of-type {
  margin-top: 34px;
}

.eat-acquisition .acq-phone__step b {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--acq-ember);
  color: #1a0d02;
}

.eat-acquisition .acq-receipt {
  width: min(370px, 88vw);
  justify-self: center;
  padding: 28px;
  border: 1px solid rgba(243, 231, 211, 0.2);
  border-radius: 8px;
  background: #efe1ca;
  color: #21160f;
  box-shadow: 0 38px 80px -36px #000;
  transform: rotate(1.5deg);
}

.eat-acquisition .acq-receipt > p {
  padding-bottom: 18px;
  border-bottom: 2px dashed rgba(33, 22, 15, 0.35);
  font-family: ui-monospace, monospace;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-align: center;
}

.eat-acquisition .acq-receipt div {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px dashed rgba(33, 22, 15, 0.22);
  font-family: ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.4;
}

.eat-acquisition .acq-receipt b {
  text-align: right;
}

.eat-acquisition .acq-truth-band {
  /* Without this the band falls through to `.eat-landing section` in card.css,
     which pays a flat 160px top and bottom — by far the largest gap on the
     page. The top stays small because the hero above already closes with its
     own bottom padding — 24px just separates the band from it rather than
     reopening the full section gap. */
  padding: 24px 0 var(--section-pad);
  background: transparent;
}

.eat-acquisition .acq-truth-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.eat-acquisition .acq-truth-grid > div {
  position: relative;
  z-index: 0;
  padding: 24px 26px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
  transition: transform 420ms var(--eat-ease, ease),
    border-color 420ms var(--eat-ease, ease),
    box-shadow 420ms var(--eat-ease, ease),
    background 420ms var(--eat-ease, ease);
}

.eat-acquisition .acq-truth-grid > div:hover {
  z-index: 1;
  transform: scale(1.035);
  border-color: rgba(255, 128, 18, 0.4);
  background: rgba(255, 255, 255, 0.09);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42), 0 0 26px rgba(255, 128, 18, 0.16);
}

@media (prefers-reduced-motion: reduce) {
  .eat-acquisition .acq-truth-grid > div {
    transition: none;
  }

  .eat-acquisition .acq-truth-grid > div:hover {
    transform: none;
  }
}

.eat-acquisition .acq-truth-grid strong,
.eat-acquisition .acq-truth-grid span {
  display: block;
}

.eat-acquisition .acq-truth-grid strong {
  color: var(--acq-ember);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
}

.eat-acquisition .acq-truth-grid span {
  margin-top: 7px;
  color: var(--acq-smoke);
  font-size: 14px;
  line-height: 1.5;
}

.eat-acquisition .acq-section {
  padding: var(--section-pad) 0;
}

.eat-acquisition .acq-section--surface {
  background: transparent;
}

/* Centred section header, matching how the reference treats its own:
   .el-how__header, .el-benefits__header and .el-refer__header are each
   `text-align: center` with a capped measure and auto margins.

   Scoped to direct children of .acq-wrap so only the label, heading and lede
   centre — the cards and lists below keep their left-aligned text, as they do
   on the reference. */
.eat-acquisition .acq-section--center > .acq-wrap > .acq-eyebrow,
.eat-acquisition .acq-section--center > .acq-wrap > h2,
.eat-acquisition .acq-section--center > .acq-wrap > .acq-subheading,
.eat-acquisition .acq-section--center > .acq-wrap > .acq-body {
  text-align: center;
}

/* h2 carries max-width: 850px and .acq-body--wide 840px, so centring the text
   is not enough on its own — the box has to be centred too. */
.eat-acquisition .acq-section--center > .acq-wrap > h2,
.eat-acquisition .acq-section--center > .acq-wrap > .acq-body {
  margin-right: auto;
  margin-left: auto;
}

.eat-acquisition .acq-card-grid {
  display: flex;
  align-items: stretch;
  gap: 12px;
  width: min(1100px, 100%);
  margin-top: 48px;
}

.eat-acquisition .acq-card {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
  padding: 22px 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
}

/* The card is already a flex column, so the trailing link only needs to claim
   the leftover space to sit on the card's floor. Without this it followed the
   description directly, and because the four descriptions run to different
   lengths the links landed at four different heights — most visibly "Start
   creating", whose one-line description lifted it above the other three.
   Auto margin rather than a fixed offset, so it stays correct when the copy
   rewraps at any width. */
.eat-acquisition .acq-card > .acq-text-link {
  margin-top: auto;
  padding-top: 14px;
}

/* Numbering as the reference's .el-how__num: a 36px rounded badge holding the
   step number, rather than a bare line of accent text. */
.eat-acquisition .acq-card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: 6px;
  border-radius: 10px;
  background: rgba(255, 115, 22, 0.18);
  color: var(--acq-ember);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.eat-acquisition .acq-card.is-active .acq-card__num {
  background: rgba(0, 0, 0, 0.18);
  color: rgba(0, 0, 0, 0.78);
}

/* Connector rail between steps: a 64px gap holding a gradient line, with a dot
   that travels across it when the active step advances. Reuses the reference's
   el-arrow-travel-x keyframe, which reaches this sheet through the card.css
   import at the top of this file. */
.eat-acquisition .acq-connector {
  position: relative;
  flex: 0 0 64px;
  width: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.eat-acquisition .acq-connector__line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.06),
    rgba(255, 115, 22, 0.55),
    rgba(255, 255, 255, 0.06)
  );
  box-shadow: 0 0 12px rgba(255, 115, 22, 0.22);
  transform: translateY(-50%);
}

.eat-acquisition .acq-connector__dot {
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -6px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--acq-ember);
  box-shadow: 0 0 8px rgba(255, 115, 22, 0.35);
  opacity: 0;
}

.eat-acquisition .acq-connector.is-animating .acq-connector__dot {
  opacity: 1;
  animation: el-arrow-travel-x var(--arrow-travel, 1200ms) ease-in-out forwards;
}

/* Stack the rail vertically on narrow screens, as the reference does. */
@media (max-width: 860px) {
  .eat-acquisition .acq-card-grid {
    flex-direction: column;
  }

  /* .acq-card carries flex: 1 1 0 so the cards share the row evenly. Once the
     rail turns into a column that basis of 0 applies to height instead, and
     the cards collapsed to 46px while ~200px of content spilled out past the
     background. Only the basis is restored; the row layout is untouched. */
  .eat-acquisition .acq-card-grid > .acq-card {
    flex-basis: auto;
  }

  .eat-acquisition .acq-connector {
    flex: 0 0 34px;
    width: 100%;
    height: 34px;
  }

  .eat-acquisition .acq-connector__line {
    left: 50%;
    right: auto;
    top: 0;
    bottom: 0;
    width: 3px;
    height: auto;
    transform: translateX(-50%);
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.06),
      rgba(255, 115, 22, 0.55),
      rgba(255, 255, 255, 0.06)
    );
  }

  .eat-acquisition .acq-connector__dot {
    left: 50%;
    top: 0;
    margin-top: 0;
    margin-left: -6px;
  }

  .eat-acquisition .acq-connector.is-animating .acq-connector__dot {
    animation-name: el-arrow-travel-y;
  }
}

/* Active step, mirroring .el-how__card.is-active on the reference: the card
   takes the ember fill, its text flips to dark ink, and it lifts slightly.
   Cycled by initAcquisitionStepCards(). The transition is stated here because
   these cards also carry .el-reveal, which owns a 0.7s opacity/transform
   transition for the entry animation — without a shorter one for the cycling
   state the ember fill would crawl in over the reveal's duration. */
.eat-acquisition .acq-card.is-active {
  border-color: rgba(255, 128, 18, 0.8);
  background: var(--acq-ember);
  box-shadow: 0 16px 40px rgba(255, 115, 22, 0.35);
  transform: translateY(-2px);
  transition: background 260ms var(--eat-ease, ease),
    border-color 260ms var(--eat-ease, ease),
    box-shadow 260ms var(--eat-ease, ease),
    transform 260ms var(--eat-ease, ease);
}

.eat-acquisition .acq-card.is-active > span,
.eat-acquisition .acq-card.is-active h3,
.eat-acquisition .acq-card.is-active p {
  color: rgba(0, 0, 0, 0.78);
}

/* The lit card fills with ember and flips its text to dark ink, but the rule
   above never covered links — so .acq-text-link stayed ember-on-ember and the
   card's only call to action disappeared exactly when the card was
   highlighted. Full --eat-cta-ink rather than the 0.78 body alpha, matching
   how every other dark-ink-on-ember element in the product is set, and so the
   link still reads as the actionable item rather than as body copy. */
.eat-acquisition .acq-card.is-active .acq-text-link {
  color: #1a0d02;
}

.eat-acquisition .acq-card h3 {
  margin: 0;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
}

.eat-acquisition .acq-card p {
  margin: 0;
  color: var(--acq-smoke);
  font-size: 14px;
  line-height: 1.5;
}

.eat-acquisition .acq-two-col {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(44px, 8vw, 110px);
  align-items: start;
}

.eat-acquisition .acq-timeline {
  list-style: none;
  counter-reset: activation;
}

.eat-acquisition .acq-timeline li {
  position: relative;
  min-height: 88px;
  padding: 0 0 28px 54px;
  border-left: 1px solid rgba(255, 128, 18, 0.35);
  counter-increment: activation;
}

.eat-acquisition .acq-timeline li:last-child {
  border-left-color: transparent;
}

.eat-acquisition .acq-timeline li::before {
  content: counter(activation);
  position: absolute;
  top: -4px;
  left: -19px;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(255, 128, 18, 0.55);
  border-radius: 50%;
  background: var(--acq-char);
  color: var(--acq-ember);
  font-weight: 900;
}

.eat-acquisition .acq-timeline b,
.eat-acquisition .acq-timeline span {
  display: block;
}

.eat-acquisition .acq-timeline b {
  color: var(--acq-cream);
  font-size: 17px;
}

.eat-acquisition .acq-timeline span {
  margin-top: 5px;
  color: var(--acq-smoke);
  font-size: 14px;
  line-height: 1.5;
}

.eat-acquisition .acq-checklist {
  list-style: none;
}

.eat-acquisition .acq-checklist li {
  position: relative;
  padding: 18px 0 18px 42px;
  border-bottom: 1px solid rgba(243, 231, 211, 0.1);
  color: #d7c7b2;
  font-size: 16px;
  line-height: 1.55;
}

.eat-acquisition .acq-checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--acq-ember);
  font-weight: 900;
}

.eat-acquisition .acq-faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-top: 42px;
  overflow: hidden;
  border: 1px solid rgba(243, 231, 211, 0.1);
  border-radius: 18px;
  background: rgba(243, 231, 211, 0.1);
}

.eat-acquisition .acq-faq-grid article {
  /* The 190px floor was the source of the dead space: most answers run two or
     three lines and finished well short of it, leaving a visible gap under
     every question. Grid rows still equalise against the tallest card in the
     row, so the panel stays even without a hard minimum. */
  min-height: 0;
  padding: 22px 24px;
  background: var(--acq-surface);
}

.eat-acquisition .acq-faq-grid p,
.eat-acquisition .acq-stack p {
  margin-top: 8px;
  color: var(--acq-smoke);
  font-size: 14px;
  line-height: 1.5;
}

.eat-acquisition .acq-stack {
  display: grid;
  gap: 12px;
}

.eat-acquisition .acq-stack article {
  padding: 22px 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
  transition: transform var(--eat-duration, 300ms) var(--eat-ease, ease),
    border-color var(--eat-duration, 300ms) var(--eat-ease, ease),
    box-shadow var(--eat-duration, 300ms) var(--eat-ease, ease),
    background var(--eat-duration, 300ms) var(--eat-ease, ease);
}

/* Hover lift, matching .el-how__card:hover on the reference — the edge warms to
   ember, the card rises 3px and casts a soft shadow. */
.eat-acquisition .acq-stack article:hover {
  border-color: rgba(255, 115, 22, 0.45);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
  transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
  .eat-acquisition .acq-stack article {
    transition: none;
  }

  .eat-acquisition .acq-stack article:hover {
    transform: none;
  }
}

.eat-acquisition .acq-stack h3 {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
}

.eat-acquisition .acq-text-link {
  display: inline-block;
  margin-top: 22px;
  color: var(--acq-ember);
  font-size: 16px;
  font-weight: 800;
}

/* The reference underlines its inline text links on hover
   (.el-hero__note a:hover); this had no hover state at all. */
.eat-acquisition .acq-text-link:hover {
  text-decoration: underline;
}

.eat-acquisition .acq-final {
  padding: var(--section-pad) 0;
  background: linear-gradient(110deg, var(--acq-hot), var(--acq-ember));
  text-align: center;
}

.eat-acquisition .acq-final .acq-eyebrow,
.eat-acquisition .acq-final h2,
.eat-acquisition .acq-final p {
  color: #2a1203;
}

.eat-acquisition .acq-final h2 {
  margin-right: auto;
  margin-left: auto;
}

.eat-acquisition .acq-final p {
  margin-top: 18px;
  font-size: 14px;
  font-weight: 700;
}

.eat-acquisition .acq-final p a {
  text-decoration: underline;
}

.eat-acquisition .acq-handoff {
  display: grid;
  min-height: calc(100vh - var(--nav-h));
  place-items: center;
  padding: clamp(64px, 8vw, 104px) 20px;
  background:
    radial-gradient(62% 72% at 50% 0%, rgba(255, 128, 18, 0.2), transparent 66%),
    var(--acq-char);
}

.eat-acquisition .acq-handoff__shell {
  width: min(980px, 100%);
  padding: clamp(28px, 5vw, 58px);
  border: 1px solid rgba(243, 231, 211, 0.12);
  border-radius: 30px;
  background:
    radial-gradient(75% 90% at 100% 0%, rgba(255, 128, 18, 0.1), transparent 68%),
    linear-gradient(145deg, var(--acq-surface-2), #100c09);
  box-shadow: 0 40px 100px -46px #000, inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.eat-acquisition .acq-handoff__intro {
  max-width: 720px;
}

.eat-acquisition .acq-handoff__brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 38px;
}

/* The lockup itself is styled by the shared .el-nav__logo / .el-nav__wordmark
   rules in styles/network.css, so it matches the navbar exactly. The rules
   that were here sized the logo at 52px and set the wordmark in Impact, which
   is why this read as a different mark from the one in the nav above it. */

/* This hero carried its own scale — 48-80px against the shared 42-76px — which
   made it the largest headline on the site, on the one page that is a handoff
   step rather than a landing page. It also ran wider than the shared cap
   because max-width was removed. Both come back onto the acquisition scale;
   only the tighter margin-top is kept, since the brand lockup sits above it. */
.eat-acquisition .acq-handoff h1 {
  margin-top: 12px;
}

.eat-acquisition .acq-handoff .acq-lede {
  max-width: 660px;
  font-size: clamp(17px, 2vw, 20px);
}

/* Store badges.

   These were two half-width panels 112px tall, so a 42px mark and two short
   lines of text floated in a large empty tile that read as a generic card.
   A download badge is a small, content-sized object, so the pair is now sized
   to its contents and centred as a unit. */
.eat-acquisition .acq-store-grid {
  display: flex;
  flex-wrap: wrap;
  /* The reference card centres its badges because it is a standalone block.
     Here the eyebrow, headline and lede above are all left-aligned, so a
     centred pair reads as an orphan; the row follows the column it sits in. */
  justify-content: flex-start;
  gap: 14px;
  margin-top: 32px;
}

/* Only reserve the space when a badge is actually flagged, which happens on
   the matching device — on desktop neither is, and the row stays tight. */
.eat-acquisition .acq-store-grid:has(.is-recommended) {
  padding-bottom: 26px;
}

.eat-acquisition .acq-store-card {
  position: relative;
  display: inline-grid;
  grid-template-columns: 30px auto;
  gap: 12px;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  /* Equal width across the pair. "Google Play" sets the wider of the two
     labels; without a floor the badges came out 14px apart in width, which is
     visible when they sit side by side. */
  min-width: 196px;
  padding: 10px 18px;
  /* Near-black on a light hairline is the store badges' own convention, and it
     also separates them from the page's translucent white surfaces, so they
     read as supplied artwork rather than as two more EAT panels. */
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 10px;
  background: #000;
  color: #fff;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.eat-acquisition .acq-store-card:hover,
.eat-acquisition .acq-store-card.is-recommended {
  transform: translateY(-2px);
  border-color: rgba(255, 128, 18, 0.7);
  background: #0a0603;
}

.eat-acquisition .acq-store-card svg {
  width: 30px;
  height: 30px;
  color: #fff;
}

.eat-acquisition .acq-store-card span,
.eat-acquisition .acq-store-card small,
.eat-acquisition .acq-store-card strong {
  display: block;
}

.eat-acquisition .acq-store-card small {
  color: rgba(255, 255, 255, 0.86);
  font-size: 11px;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.eat-acquisition .acq-store-card strong {
  margin-top: 2px;
  font-size: 19px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* Sits under its badge rather than inside it: at badge size there is no room
   for a pill in the corner without crowding the mark. */
.eat-acquisition .acq-store-card em {
  position: absolute;
  left: 50%;
  bottom: -26px;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--acq-ember);
  color: #1a0d02;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.eat-acquisition .acq-handoff__installed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: 18px;
  padding: 24px;
  border: 1px solid rgba(243, 231, 211, 0.09);
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.18);
}

.eat-acquisition .acq-handoff__installed h2 {
  margin: 0;
  color: var(--acq-cream);
  font-family: inherit;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.eat-acquisition .acq-handoff__installed p {
  margin-top: 6px;
  color: var(--acq-smoke);
  font-size: 14px;
}

.eat-acquisition .acq-handoff__installed .acq-button {
  flex: 0 0 auto;
}

.eat-acquisition .acq-handoff__activation {
  max-width: 720px;
  margin-top: 28px;
  color: var(--acq-smoke);
  font-size: 13px;
  line-height: 1.55;
}

.eat-acquisition .acq-handoff__web-link {
  display: inline-block;
  margin-top: 14px;
  color: var(--acq-ember);
  font-size: 14px;
  font-weight: 800;
}

@media (max-width: 900px) {
  .eat-acquisition .acq-hero__grid,
  .eat-acquisition .acq-two-col {
    grid-template-columns: 1fr;
  }

  .eat-acquisition .acq-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .eat-acquisition .acq-format-grid,
  .eat-acquisition .acq-example-grid,
  .eat-acquisition .acq-growth-path { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .eat-acquisition .acq-profile-work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eat-acquisition .acq-lead-grid { grid-template-columns: 1fr; }

  .eat-acquisition .acq-phone,
  .eat-acquisition .acq-receipt {
    margin-top: 12px;
  }

  .eat-acquisition .acq-network-loop {
    width: 100%;
    justify-self: stretch;
  }
}

@media (max-width: 640px) {
  .eat-acquisition .acq-wrap {
    width: min(100% - 32px, 1140px);
  }

  .eat-acquisition .acq-hero {
    padding-top: 54px;
  }

  .eat-acquisition .acq-actions,
  .eat-acquisition .acq-actions .acq-button {
    width: 100%;
  }

  .eat-acquisition .acq-truth-grid,
  .eat-acquisition .acq-card-grid,
  .eat-acquisition .acq-faq-grid,
  .eat-acquisition .acq-format-grid,
  .eat-acquisition .acq-example-grid,
  .eat-acquisition .acq-growth-path {
    grid-template-columns: 1fr;
  }

  .eat-acquisition .acq-profile-heading,
  .eat-acquisition .acq-profile-work-grid,
  .eat-acquisition .acq-lead-row { grid-template-columns: 1fr; }

  .eat-acquisition .acq-profile-avatar { width: 112px; height: 112px; }

  .eat-acquisition .acq-truth-grid > div {
    border: 1px solid rgba(255, 255, 255, 0.14);
  }

  .eat-acquisition .acq-card {
    min-height: 0;
  }

  .eat-acquisition .acq-card h3 {
    margin-top: 26px;
  }

  .eat-acquisition .acq-phone {
    transform: none;
  }

  .eat-acquisition .acq-store-grid {
    grid-template-columns: 1fr;
  }

  .eat-acquisition .acq-handoff__shell {
    padding: 24px;
    border-radius: 22px;
  }

  .eat-acquisition .acq-handoff__brand {
    margin-bottom: 28px;
  }

  .eat-acquisition .acq-handoff__installed {
    align-items: stretch;
    flex-direction: column;
  }

  .eat-acquisition .acq-handoff__installed .acq-button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .eat-acquisition .acq-button {
    transition: none;
  }
}