/* =========================================================================
   App Design & UI/UX — page-scoped aesthetic layer (design.html ONLY)
   --------------------------------------------------------------------------
   Loaded AFTER wta.css so it wins the cascade WITHOUT editing the shared
   wta.css (also used by website-to-app.html + marketing-package.html).
   Every rule is scoped under .wta-page--design (the <main> class) so nothing
   here can ever leak onto the other two pages.

   Brand: Midnight Operator — navy #0A1A3F + gold #E8B400, Anybody + Inter.
   Honors UI-UX-PRO-MAX: visual-hierarchy, whitespace-balance, state-clarity,
   scale-feedback, motion-meaning, duration-timing (150-300ms), AA contrast,
   reduced-motion. All colours come from existing tokens — no new hex.
   ========================================================================= */

/* ---- Sticky-label secondary CTA ---------------------------------------- */
/* Recaptures the inline CTAs lost with the removed tier cards. Ghost (not
   gold) so the single dominant primary CTA stays the gold final-CTA band
   (UI-UX-PRO-MAX: primary-action — one primary per screen). */
.wta-page--design .wta-split__cta {
  margin-top: 28px;
  min-height: 48px;
  background: var(--color-accent);    /* gold #E8B400 */
  color: var(--color-primary);        /* navy text + arrow #0A1A3F */
  border-color: var(--color-accent);  /* gold border — no white */
}
.wta-page--design .wta-split__cta:hover {
  background: #d4a400;                 /* slightly deeper gold */
  color: var(--color-primary);        /* stay navy — never gold-on-gold */
  border-color: #d4a400;
}

/* =========================================================================
   SERVICES — flat numbered rows  ->  elevated numbered cards
   ========================================================================= */
.wta-page--design .wta-services__list {
  display: grid;
  gap: 16px;
}

/* Card shell (overrides the wta.css divider-row treatment) */
.wta-page--design .wta-svc {
  grid-template-columns: 60px 1fr;
  gap: 24px;
  align-items: start;
  padding: 28px 30px;
  border: 1px solid var(--wta-line);
  border-radius: 18px;
  background: var(--wta-card);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02) inset;
  transition: transform 240ms var(--ease-out-soft),
    border-color 240ms var(--ease-out-soft),
    box-shadow 240ms var(--ease-out-soft),
    background 240ms var(--ease-out-soft);
}
/* Neutralize wta.css first-child divider reset so card 01 matches the rest */
.wta-page--design .wta-svc:first-child {
  padding-top: 28px;
  border-top: 1px solid var(--wta-line);
}
.wta-page--design .wta-svc:hover {
  transform: translateY(-4px);
  border-color: rgba(232, 180, 0, 0.38);
  background: var(--wta-card-2);
  box-shadow: 0 26px 54px -32px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(232, 180, 0, 0.10);
}

/* Number -> gold-outlined index token (fills faint gold on hover) */
.wta-page--design .wta-svc__num {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border: 1.5px solid rgba(232, 180, 0, 0.42);
  border-radius: 16px;
  background: rgba(232, 180, 0, 0.04);
  font-size: clamp(22px, 2vw, 28px);
  -webkit-text-stroke: 0;
  color: var(--color-accent);
  transition: background 240ms var(--ease-out-soft),
    border-color 240ms var(--ease-out-soft),
    transform 240ms var(--ease-out-soft);
}
.wta-page--design .wta-svc:hover .wta-svc__num {
  background: rgba(232, 180, 0, 0.13);
  border-color: rgba(232, 180, 0, 0.6);
  color: var(--color-accent);
  transform: scale(1.04);
}

/* Separate the deliverables line from the body for scannability */
.wta-page--design .wta-svc__deliver {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--wta-line-soft);
}

/* =========================================================================
   WHY US — arrow list  ->  2-up value cards with circular gold tokens
   ========================================================================= */
.wta-page--design .wta-diff__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.wta-page--design .wta-diff__item {
  grid-template-columns: 44px 1fr;
  gap: 18px;
  align-items: start;
  margin: 0;
  padding: 26px 26px;
  border: 1px solid var(--wta-line);
  border-radius: 16px;
  background: var(--wta-card);
  transition: transform 240ms var(--ease-out-soft),
    border-color 240ms var(--ease-out-soft),
    box-shadow 240ms var(--ease-out-soft),
    background 240ms var(--ease-out-soft);
}
/* Override wta.css first-child border-top:0 so every card has a full border */
.wta-page--design .wta-diff__item:first-child {
  border-top: 1px solid var(--wta-line);
}
.wta-page--design .wta-diff__item:hover {
  transform: translateY(-4px);
  border-color: rgba(232, 180, 0, 0.38);
  background: var(--wta-card-2);
  box-shadow: 0 26px 54px -32px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(232, 180, 0, 0.10);
}

/* Arrow -> circular gold token */
.wta-page--design .wta-diff__arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: 0;
  border-radius: 50%;
  background: rgba(232, 180, 0, 0.12);
  border: 1px solid rgba(232, 180, 0, 0.30);
  color: var(--color-accent);
  transition: background 240ms var(--ease-out-soft),
    border-color 240ms var(--ease-out-soft),
    transform 240ms var(--ease-out-soft);
}
.wta-page--design .wta-diff__arrow svg {
  width: 20px;
  height: 20px;
}
.wta-page--design .wta-diff__item:hover .wta-diff__arrow {
  background: rgba(232, 180, 0, 0.22);
  border-color: rgba(232, 180, 0, 0.55);
  transform: scale(1.06);
}
.wta-page--design .wta-diff__lead {
  margin-top: 2px;
}

/* =========================================================================
   Responsive — match existing wta.css breakpoints (980 / 720 / 540)
   ========================================================================= */
@media (max-width: 720px) {
  .wta-page--design .wta-diff__list {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 540px) {
  .wta-page--design .wta-svc {
    padding: 22px 20px;
    /* wta.css stacks .wta-svc to 1 col here; keep the token left-aligned */
    grid-template-columns: 56px 1fr;
    gap: 16px;
  }
  .wta-page--design .wta-svc__num {
    width: 52px;
    height: 52px;
  }
  .wta-page--design .wta-diff__item {
    padding: 22px 20px;
  }
  .wta-page--design .wta-split__cta {
    width: 100%;
  }
}

/* =========================================================================
   Reduced motion — parity with wta.css (disable the new hover/transition fx)
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .wta-page--design .wta-svc,
  .wta-page--design .wta-svc__num,
  .wta-page--design .wta-diff__item,
  .wta-page--design .wta-diff__arrow {
    transition: none;
  }
  .wta-page--design .wta-svc:hover,
  .wta-page--design .wta-diff__item:hover {
    transform: none;
  }
  .wta-page--design .wta-svc:hover .wta-svc__num,
  .wta-page--design .wta-diff__item:hover .wta-diff__arrow {
    transform: none;
  }
}